Opened 9 years ago
Closed 9 years ago
#34780 closed defect (bug) (fixed)
Updates screen: Plugin and Theme tables improvements
Reported by: | afercia | Owned by: | 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 )
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.
Attachments (1)
Change History (11)
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
#6
@
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
@
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
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.