Bug 1573197 - Make the bar chart in the protection report accessible, r=mtigley,fluent-reviewers,flod draft
authorMarco Zehe <mzehe@mozilla.com>
Tue, 13 Aug 2019 16:07:41 +0000
changeset 11923 9753a4b3af60d1f7df12871aba0817d922a7bea7
parent 11922 4729c34e74c3f764cf822c749e64103cb0217068
child 11924 d650fb11320f189589d479a16008b91c136e69fc
push id315
push userflodolo@mozilla.com
push dateThu, 15 Aug 2019 04:59:12 +0000
reviewersmtigley, fluent-reviewers, flod
bugs1573197
Bug 1573197 - Make the bar chart in the protection report accessible, r=mtigley,fluent-reviewers,flod 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. Differential Revision: https://phabricator.services.mozilla.com/D41593 X-Channel-Repo: mozilla-central X-Channel-Converted-Revision: 9700ef1693eddebd6b9c03aedc66a130f9409c20 X-Channel-Repo: releases/mozilla-beta X-Channel-Revision: e5d98eda2ec359a0968c567076b1a625cb6c99ce X-Channel-Repo: releases/mozilla-release X-Channel-Revision: 2fb19d0466d2f61674c0af80813645cccd510593 X-Channel-Repo: releases/mozilla-esr68 X-Channel-Revision: a8da73ce90a4110e14caaba3e93d8a086b3a0669
browser/browser/protections.ftl
--- a/browser/browser/protections.ftl
+++ b/browser/browser/protections.ftl
@@ -132,18 +132,50 @@ password-warning =
   }
 
 # This is the title attribute describing the graph report's link to about:settings#privacy
 go-to-privacy-settings = Go to Privacy Settings
 
 # This is the title attribute describing the Lockwise card's link to about:logins
 go-to-saved-logins = Go to Saved Logins
 
+## The title attribute is used to display the type of protection.
+## The aria-label is spoken by screen readers to make the visual graph accessible to blind users.
+##
+## Variables:
+##   $count (Number) - Number of specific trackers
+##   $percentage (Number) - Percentage this type of tracker contributes to the whole graph
+
 bar-tooltip-social =
   .title = Social Media Trackers
+  .aria-label =
+    { $count ->
+       [one] { $count } social media tracker ({ $percentage }%)
+      *[other] { $count } social media trackers ({ $percentage }%)
+    }
 bar-tooltip-cookie =
   .title = Cross-Site Tracking Cookies
+  .aria-label =
+    { $count ->
+       [one] { $count } cross-site tracking cookie ({ $percentage }%)
+      *[other] { $count } cross-site tracking cookies ({ $percentage }%)
+    }
 bar-tooltip-tracker =
   .title = Tracking Content
+  .aria-label =
+    { $count ->
+       [one] { $count } tracking content ({ $percentage }%)
+      *[other] { $count } tracking content ({ $percentage }%)
+    }
 bar-tooltip-fingerprinter =
   .title = Fingerprinters
+  .aria-label =
+    { $count ->
+       [one] { $count } fingerprinter ({ $percentage }%)
+      *[other] { $count } fingerprinters ({ $percentage }%)
+    }
 bar-tooltip-cryptominer =
   .title = Cryptominers
+  .aria-label =
+    { $count ->
+       [one] { $count } cryptominer ({ $percentage }%)
+      *[other] { $count } cryptominers ({ $percentage }%)
+    }