Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#34780 closed defect (bug) (fixed)

Updates screen: Plugin and Theme tables improvements

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.3
Component: Administration Keywords: has-patch has-screenshots commit
Focuses: ui, accessibility Cc:

Description (last modified by afercia)

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 tds.
Any thoughts more than welcome.

https://cldup.com/-oAKMXWzRx.png

Attachments (1)

34780.patch (7.6 KB) - added by afercia 9 years ago.

Download all attachments as: .zip

Change History (11)

#1 @afercia
9 years ago

  • Description modified (diff)

#2 @afercia
9 years ago

  • Owner set to afercia
  • Status changed from new to assigned

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


9 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


9 years ago

#5 @rianrietveld
9 years ago

My 2 pennies:
In fact this is a table used for layout, semantically it seems more like a list to me.
Maybe remove the scope from the th and td first, and then think of a way to set up the layout, not in a table but in another, more semantic way.

@afercia
9 years ago

#6 @afercia
9 years ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 4.5

First pass, the proposed patch removes scope attributes and changes table headers in simple table cells to remove any logical relationship between cells. Also, tries to simplify a bit the CSS.

#7 @afercia
9 years ago

Discussed a bit in the accessibility team chat a while ago and agreed to remove some semantics. While it may seem counterintuitive, in limited cases it's better to remove improper semantics (this is not a tabular data table) and noise for screen reader users and simplify all the things.
Worth noting also this screen will probably change soon as part of the Shiny Updates v2 effort currently under development on GitHub, see https://github.com/obenland/shiny-updates/issues/5

#8 @afercia
9 years ago

  • Keywords has-screenshots commit added

The patch also makes the h2 headings a bit bigger (default h2 font-size) to better separate the sections and removes the theme screenshot inline style. Screenshots before and after:

https://cldup.com/zocqnUGkDr.png

https://cldup.com/aC_YQ5lG4C.png

This ticket was mentioned in Slack in #design by afercia. View the logs.


9 years ago

#10 @afercia
9 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 36477:

Accessibility: simplify the Plugins and Themes tables on the Updates screen.

Although it may seem counterintuitive at first, in very limited cases it's
better to remove improper semantics (this is not a tabular data table) in
order to reduce noise for screen reader users and simplify all the things.
Also improves headings to better separate sections.

Fixes #34780.

Note: See TracTickets for help on using tickets.