[wp-trac] [WordPress Trac] #34780: Updates screen: Plugin and Theme tables improvements

[WordPress Trac]

#34780: Updates screen: Plugin and Theme tables improvements
----------------------------+--------------------------------
 Reporter:  afercia         |       Owner:
     Type:  defect (bug)    |      Status:  new
 Priority:  normal          |   Milestone:  Awaiting Review
Component:  Administration  |     Version:  4.3
 Severity:  normal          |  Resolution:
 Keywords:  needs-patch     |     Focuses:  ui, accessibility
----------------------------+--------------------------------
Description changed by afercia:

Old description:

> While investigating on #34744, noticed the Plugins and Themes tables in
> the Updates screen make use of `th` tags and `scope` attributes to
> establish relationships between the table cells. This is perfectly valid
> and must be done with tabular data. By the way I wouldn't say these are
> tabular data.
>
> These tables are mostly used for presentation and it would be better to
> clean them up a bit to avoid screen readers reading out inconsistent
> relationships.
> For example (see the screenshot below) marking the "Select All" cell as a
> `th` with a `scope="col"` attribute basically says the whole column
> contains data of type "Select All" :)
> Screen reader read out this when moving horizontally through cells and
> users will hear something like:
> "Select All Twenty Fifteen you have version..." when they're on the
> second cell.
> The first cell (the one with the checkbox) is a `td` but has a
> `scope="col"` attribute which is invalid on a `td`.
>
> TL;DR since this is a very simple table with just two columns and a
> (small) number of rows depending on how many updates are available, I'd
> suggest to remove any `scope` attribute and use just `td`s.
> Any thoughts more than welcome.
>

> [[Image(https://cldup.com/-oAKMXWzRx.png)]]

New description:

 While investigating on #34774, noticed the Plugins and Themes tables in
 the Updates screen make use of `th` tags and `scope` attributes to
 establish relationships between the table cells. This is perfectly valid
 and must be done with tabular data. By the way I wouldn't say these are
 tabular data.

 These tables are mostly used for presentation and it would be better to
 clean them up a bit to avoid screen readers reading out inconsistent
 relationships.
 For example (see the screenshot below) marking the "Select All" cell as a
 `th` with a `scope="col"` attribute basically says the whole column
 contains data of type "Select All" :)
 Screen reader read out this when moving horizontally through cells and
 users will hear something like:
 "Select All Twenty Fifteen you have version..." when they're on the second
 cell.
 The first cell (the one with the checkbox) is a `td` but has a
 `scope="col"` attribute which is invalid on a `td`.

 TL;DR since this is a very simple table with just two columns and a
 (small) number of rows depending on how many updates are available, I'd
 suggest to remove any `scope` attribute and use just `td`s.
 Any thoughts more than welcome.


 [[Image(https://cldup.com/-oAKMXWzRx.png)]]

--

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