[wp-trac] [WordPress Trac] #46960: Site Health: Table design issue in small devices(iphone 5/SE).

[WordPress Trac]

#46960: Site Health: Table design issue in small devices(iphone 5/SE).
-------------------------------------+-------------------------------------
 Reporter:  immeet94                 |       Owner:  (none)
     Type:  defect (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  5.2.1
Component:  Administration           |     Version:  5.2
 Severity:  normal                   |  Resolution:
 Keywords:  has-screenshots site-    |     Focuses:  ui, accessibility,
  health has-patch needs-testing     |  administration
-------------------------------------+-------------------------------------

Comment (by afercia):

 > One idea may be to add overflow styles for the x-axis to allow scrolling
 within the table on smaller devices.

 Not sure that would be a great user experience, as scrolling horizontally
 is very annoying on mobile. Not to mention it's extremely difficult for
 keyboard users and
 [https://webaim.org/projects/screenreadersurvey7/#mobilekeyboard many
 screen reader users use a keyboard when using their mobile devices].

 Worth noting the root cause of the issue is not just the use of tables.
 Non-breakable words and long URLs/paths make the table cells wider. See
 attached screenshot on the left.

 Even using something like `word-break: break-all;` wouldn't help so much
 because the content would be mostly unreadable. See screenshot on the
 right.

 I'd tend to think the only option is to transform the table layout in
 vertically stacked blocks. From a semantics / accessibility perspective
 there wouldn't be loss of information because these tables are only used
 for layout and have an ARIA `role="presentation"`.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/46960#comment:14>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform