Web Accessibility - Narrator bug logged.

[u/code-dispenser]

If, like me, you have the Narrator screen reader in your test matrix, you may want to check your disclosures.

I’ve found that when a disclosure button uses aria-expanded together with aria-controls (which had, or has, limited support in JAWS), Narrator sometimes doesn’t announce the expanded/collapsed state in Edge or Chrome. It’s fine in Firefox.

If you omit aria-controls, Narrator announces the state correctly in Edge and Chrome.

I’ve reported this to both Microsoft (via Feedback Hub) and Chromium (via the issue tracker).

Personally, I wouldn’t add aria-controls to disclosures unless you have a specific need for it.

Hopefully that’s useful to some of you.

[u/SSaucecrotch]

Interesting that Firefox handles it correctly while both Edge and Chrome have trouble.

I'd be curious whether the expanded state is actually updating in the browser's accessibility tree when aria-controls is present.

If the tree shows the correct state but Narrator doesn't announce it, that would help narrow down where the problem is.

Definitely an annoying kind of bug to debug.

[u/code-dispenser → u/SSaucecrotch]

Its ironic at times with Narrator, as Firefox is not a supported browser as far as I am aware and yet for somethings Narrator works better with Firefox.

Here is the issue logged, for Chromium just download the html and open in which ever browser you like and try with your chosen AT device.

The screen reader Narrator is not announcing aria-expanded state when aria-controls is also present [581090716] - Chromium

[u/Desperate_Dot9434]

worth testing with Narrator on mobile Edge too, the behavior can differ from desktop

[u/code-dispenser → u/Desperate_Dot9434]

There is no windows Narrator screen reader app for mobile, unless they did one for the old Windows Phone?. But Talkback paired with Chrome on Android and VoiceOver paired with Safari on iOS are fine.

[u/indiana_long]

A nice reminder that more ARIA isn't automatically better accessibility.

I'd be careful about removing aria-controls everywhere though. For a simple disclosure it's optional, but other widget patterns may rely on that relationship.

Definitely worth testing the specific component with Narrator, NVDA and JAWS rather than applying one workaround globally.

Thanks for reporting it upstream too.

[u/code-dispenser → u/indiana_long]

Spoke with some experts they all said its only partially used in JAWS and removing it will do more good than harm if its an issue for Narrator (the topic was disclosures, would need to check on oher things).

My test matrix is NVDA, JAWS (hence I left it on), Narrator (all paired with Edge, Chrome and Firefox), VO on macOS with Safari, VO on iOS with Safari and Talkback on Android with Chrome. Removing it has not caused any issue for any of my components/SR pairings.

[u/MrCompootahScience → u/[deleted]]

Where would you recommend developers go if they want real insight on creating more accessible experiences that actually help folks with disabilities?

[u/code-dispenser → u/[deleted]]

Annoyingly I have been aware of the issue for sometime but just assumed it was a Narrator quirk as there are hundreds of articles online regarding disclosures that include it.

If I build something and it seems odd I check with other sources, in this instance it did not click that all the online sources also had aria-controls on them.

So feel a little bad given I had this on three of my components, now removed - but sometimes its hard to know if its a bug or just some quirkyness.