1570308 - Add a screen reader digestible form of the tracking protection graphs

Status: RESOLVED FIXED

(Firefox :: Protections UI, task, P1)

Description

[Marco Zehe (:MarcoZ)]

The graphs, as they are now, are merely a string of disjointed numbers, and some information is probably missing completely.

To fix this, provide an alternative representation in a data table, which could be visually hidden, but be visible to screen readers. Additionally, hide the graphs from assistive technologies via aria-hidden="true" so the disjointed numbers no longer appear. Since this is not simply an image that shows the graphs, but the numbers and visuals are made up of several HTML elements, the aproaches given in this tutorial don't really apply to us. If they did, example 1 approach 1 or approach 3 would be good candidates for implementation.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug is a task, but please change it back in case of error.

Comment 2

[Erica Wright [:ewright]]

Attachment: Bug 1570308 - make legend understandable to screen readers

Comment 3

[Marco Zehe (:MarcoZ)]

Attachment: WIP for an accessible table of the graph

Erica, since I couldn't get this out of my head, I've started on turning the graphs sections into a table (without changing the visuals). For that, a few IDs need to be generated so they can be referenced by the various WAI-ARIA attributes. Through a trick, AKA aria-owns, I make the day for each bar into a row header for that.

The one thing that is missing is an addition I would like that would give me both the tooltip text and the percentage of each bar to a day. For that, the l10n for each of the tooltips would have to be enhanced with an .aria-label section that contains both the text of that tooltip + an addition of " (x%)", where x is obviosly the calculated percentage, so the final result would be "cross-site cookies (40%)". That would be text only visible to screen readers on the same element (the div in the inner-bar) that gets the .title attribute. Is that even possible in one go? Would appreciate some help on that part, since I am not familiar with FTL.

Comment 4

[Erica Wright [:ewright]]

Thanks :marcoZ! I'll be travelling without a laptop or any signal for the next two weeks, please direct any questions to Micah. Otherwise I'll look into this when I'm back.

Comment 5

[Micah [:mtigley] (she/her)]

I'll be working on this while Erica is away.

Comment 6

[Marco Zehe (:MarcoZ)]

Comment on attachment 9084489 [details] [diff] [review]
WIP for an accessible table of the graph

Dealing with this now in bug 1573197.

Comment 7

[Micah [:mtigley] (she/her)]

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=10a510042653aa6e001e2d0cba010714d2409274

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/37af412cc9f1
make legend understandable to screen readers r=fluent-reviewers,mtigley,flod,MarcoZ

Comment 9

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/37af412cc9f1