Closed Bug 1573197 Opened Last month Closed Last month

Make the bar chart in the protection report accessible

Categories

(Firefox :: Tracking Protection, task, P1)

Desktop
All
task

Tracking

()

RESOLVED FIXED
Firefox 70
Tracking Status
firefox70 --- fixed

People

(Reporter: MarcoZ, Assigned: MarcoZ)

References

(Blocks 1 open bug)

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.

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.

Priority: -- → P1
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
Status: ASSIGNED → RESOLVED
Closed: Last month
Resolution: --- → FIXED
Target Milestone: --- → Firefox 70
You need to log in before you can comment on or make changes to this bug.