Make the bar chart in the protection report accessible
Categories
(Firefox :: Protections UI, task, P1)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox70 | --- | fixed |
People
(Reporter: MarcoZ, Assigned: MarcoZ)
References
Details
(Keywords: access, Whiteboard: [protection-report][skyline])
Attachments
(1 file)
The bar chart is made up of CSS generated bars from divs in a grid layout. Make them accessible to blind and visually impaired users who use assistive technology by turning the markup into a fake table that such assistive technologies can consume.
|
Assignee | |
Comment 1•5 years ago
|
||
To make the graph accessible, we turn the graph itself into a WAI-ARIA table. Each day then becomes a row within that table.
Within each row, we first have a total number, and then for each bar, we add another table cell. We record the widest row and add that to the table for assistive technologies to know how many columns there are.
In addition, we take the day legend and make that into the first column via aria-owns. The day becomes the header for the row. This changes the accessible tre structure which now differs significantly from the DOM structure.
|
||
Updated•5 years ago
|
Pushed by mtigley@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/9700ef1693ed Make the bar chart in the protection report accessible, r=mtigley,fluent-reviewers,flod
|
||
Comment 3•5 years ago
|
||
| bugherder | ||
Description
•