Make tooltip content in popup screenreader-accessible #3143

lenacohen · 2025-09-19T21:04:46Z

Addresses:

Tracker list icons missing alt-text or tooltip descriptions #3138
Tracker breakage warnings may not be screen reader accessible #3132
The "to enable logging into websites with your Google account" tooltip may not be screen reader accessible #3131
Made the collapsed/expanded state of the tracker list screenreader-accessible
Added role="radiogroup" and an aria-label to the slider group to provide more context when reading slider buttons

Tested with the VoiceOver screenreader on MacOS

Test instructions:

Navigate to each of the elements that have a tooltip:
- EFF logo
- "trackers" link
- Icons above the tracker list representing the slider options
- Domains in the tracker list
- Domain slider options
- Breakage warning tooltip
- "Click to return control" tooltip
- Google sign-in warning tooltip
- DNT icon
To see the breakage warning tooltip, move a slider in the yellow (cookie-block) position to the red (block) position

To see the "Click to return control" tooltip, move a slider to any position

To see the "DNT" icon, visit https://www.nytimes.com/ and scroll down the tracker list to the domain with the DNT icon

To see the Google sign-in warning tooltip, visit https://stackoverflow.com/ or another site with Google sign-in

…sources section

src/js/htmlutils.js

ghostwords · 2025-09-19T21:44:24Z

src/_locales/en_US/messages.json

        "message": "Move the slider right to allow a domain",
        "description": "Domain slider list header tooltip."
    },
+    "popup_slider_label": {


Is this redundant information? I ask because this wasn't raised as an issue when we revised/fixed a couple of screen reader bugs with the toggle labels last time.

Also, any the tracking domains tab is already in poor shape (crashes screen readers). Any additional toggle HTML will contribute to the tracker list performance problem.

I added the aria-label because groupings of radio buttons should have a radiogroup role, and a radiogroup must have an accessible name (see: https://www.w3.org/WAI/ARIA/apg/patterns/radio/, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/radiogroup_role)

Currently, when tabbing through interactive elements, the screenreader just reads "Block entirely, selected, radio button, 1 of 3." It's unclear what is blocked entirely (or cookieblocked or allowed). Adding an aria-label to the radio group provides context. However, this might be redundant when a screen reader user navigates through the non-interactive content (since that will include the domain before the slider).

Let's wait for Jesse to review and I'll remove if he doesn't think it's necessary.

src/js/popup.js

…equirement)

ghostwords

I like the how the tooltips appear on keyboard navigation!

We want want to have the same stuff happen in the options page. If we don't do it here, we might want to have the helper functions live in a common location so that we can do it on the options page when ready.

It doesn't look like the "Sign in with google" breakage warning is accounted for when keyboard navigating in this PR.

src/js/popup.js

ghostwords · 2025-09-23T20:17:31Z

src/js/popup.js

+ * Make tooltips keyboard accessible
+ */
+function triggerTooltipOnFocus() {
+  $('.tooltip').on('focus', function() {


The selector here is always ".tooltip" but we don't always call .tooltipster() on ".tooltip".

Also, does triggerTooltipOnFocus() get called repeatedly? Do we attach the same listener to previously processed elements over and over?

So far, I think the only elements with a tooltip that are keyboard focusable have a tooltip class. For example, I don't call this function after$('#not-yet-blocked-header').tooltipster() because the header is not interactive/tabbable (also that element has the tooltip class). In case that changes, I added an optional parameter (with default value .tooltip) for the selector.

Ah yes the same listener was being attached several times, but I've moved the function call in renderDomains and now remove the listener before adding to prevent this!

ghostwords · 2025-09-23T20:20:50Z

src/js/popup.js

+/**
+ * Make tooltips keyboard accessible
+ */
+function triggerTooltipOnFocus() {


We might want to refactor this into one or two separate functions. Do we always want to call this when we call .tooltipster()? If yes, we should take the selector as a parameter and do both .tooltipster() and the focus trigger fix in the helper function.

The second part of this function, the input thing, we might want to break it out into its own function, if we don't want to do this every time we call .tooltipster(). We should probably also make its selector more specific than input.

Good point, done!

ghostwords · 2025-09-23T20:24:05Z

src/js/popup.js

+  $('.tooltip').on('focus', function() {
+    $(this).tooltipster('show');
+  });
+  $('.tooltip').on('blur', function() {


I was wondering why we can't instead set the trigger to "custom" and specify focus/blur as our open/close triggers but it looks that's not supported by tooltipster? Oh well, too bad.

Yep! It would be nice if they supported "focus" and "blur" as custom triggers, but this is the approach they explicitly recommend for making tooltips appear on focus: https://calebjacob.github.io/tooltipster/#accessibility

ghostwords · 2025-09-23T20:29:29Z

src/_locales/en_US/messages.json

        "description": "Domain slider list header tooltip."
    },
+    "popup_slider_label": {
+        "message": "Blocking options for $DOMAIN$",


(Waiting on addtl. feedback whether we need this but,) "blocking options" seems both too specific ("blocking") and too vague ("options"). I feel stronger about "options" than "blocking" though. Not sure about better name either.

We still use "slider" in a bunch of places but maybe we shouldn't? I've been calling these controls "toggles". What do other extensions say?

What about "Settings for $DOMAIN$" or "Blocking mode for $DOMAIN$"?

Other blocking extensions don't have sliders (except for UBlock's "filtering mode") and/or are not very screenreader accessible

Alternatively:

Toggles for __

Controls for __

src/js/popup.js

lenacohen · 2025-09-24T15:07:03Z

We want want to have the same stuff happen in the options page. If we don't do it here, we might want to have the helper functions live in a common location so that we can do it on the options page when ready.

It doesn't look like the "Sign in with google" breakage warning is accounted for when keyboard navigating in this PR.

I think we should wait to update the domain tooltips on the option page until #3133 is fixed (although I haven't been able to replicate on my computer). I moved the helper functions into a common location so that it's easy when the option page is ready.

Do you mean that the "Sign in with google" warning should be tabbable? I added aria-hidden so it's read as the description of the selected toggle, but not read again at the end of the DOM. I'll need to remove that if we make it tabbable. Separately, it may be unclear to keyboard and non-keyboard users that clicking on the tooltip closes it, since I don't think that's a common pattern (unlike click-outside-to-close). To make it more accessible, we may want to add an X button and make that tabbable.

ghostwords · 2025-09-24T16:26:55Z

Do you mean that the "Sign in with google" warning should be tabbable?

Yeah, exactly. Tabbing through the popup never focuses on the warning, so you can't dismiss it with the keyboard.

You do kind of confusingly tab through elements hidden under the warning.

lenacohen added 3 commits September 18, 2025 20:03

Make information in the popup tooltips accessible

fa852d0

Add aria-expanded to the button that expands/collapses the blocked re…

b6a80ab

…sources section

Make the Google sign-in breakage note accessible

1a46b45

lenacohen added the a11y Accessibility label Sep 19, 2025

ghostwords reviewed Sep 19, 2025

View reviewed changes

src/js/htmlutils.js Outdated Show resolved Hide resolved

ghostwords reviewed Sep 19, 2025

View reviewed changes

src/js/htmlutils.js Outdated Show resolved Hide resolved

ghostwords reviewed Sep 19, 2025

View reviewed changes

src/js/popup.js Outdated Show resolved Hide resolved

lenacohen added 3 commits September 22, 2025 11:07

Address PR feedback

95412bc

Make tooltips keyboard accessible

6205f80

Ensure tooltips stay open when users hover over them (accessibility r…

469e66a

…equirement)

ghostwords reviewed Sep 23, 2025

View reviewed changes

src/js/popup.js Outdated Show resolved Hide resolved

Address PR feedback

581ee9d

lenacohen added 3 commits October 16, 2025 14:33

Make important non-interactive tooltips keyboard accessible

a2444d3

Remove aria-hidden from Google sign-in breakage note

f1db3c8

Ensure DNT icon and breakage warning icon are NVDA accessible

186c16f

Uh oh!

Make tooltip content in popup screenreader-accessible #3143

Are you sure you want to change the base?

Make tooltip content in popup screenreader-accessible #3143

Uh oh!

Conversation

lenacohen commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ghostwords Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ghostwords left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ghostwords Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ghostwords Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lenacohen commented Sep 24, 2025

Uh oh!

ghostwords commented Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

lenacohen commented Sep 19, 2025 •

edited

Loading

ghostwords Sep 19, 2025 •

edited

Loading

ghostwords Sep 23, 2025 •

edited

Loading

ghostwords Sep 23, 2025 •

edited

Loading

ghostwords commented Sep 24, 2025 •

edited

Loading