aria-label not read by NVDA or Orca
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	dom_walden
	Jan 26 2023, 9:40 AM

Description

What is the problem?

The aria-label, which is designed to make the Phonos button accessible to screenreaders, is not being read by NVDA or Orca screenreaders.

I think this is because it is used in the <span> element, which apparently will not work reliably.

The aria-label is read by Mac's VoiceOver.

Steps to reproduce problem

Install NVDA or Orca screenreaders
Turn the screenreader on
Go to https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Natural
Tab to the Phonos button

Expected behavior: The screenreader speaks "Listen to the IPA pronunciation of appalachia" (it will probably say lots of other things as well).
Observed behavior: The screenreader does not say that specific sentence.

Environment

Screenreaders:

NVDA (I don't know which version) on Chrome 109 on Windows 11 (emulated in Browserstack)
Orca 3.30.1 Debian Buster Firefox 102
VoiceOver Mac Monterey Safari 15.6 (emulated in Browserstack) (it does work on this)

Wiki(s): https://en.wikipedia.beta.wmflabs.org Phonos 0.1.0 (1223d26) 03:47, 25 January 2023.

Details

	Subject	Repo	Branch	Lines +/-
	Move aria-label to be on anchor, and remove `text` from it	mediawiki/extensions/Phonos	master	+8 -8

Customize query in gerrit

Related Objects

Mentioned In: rEPHN2de4bf30098b: Move aria-label to be on anchor, and remove `text` from it
Mentioned Here: rEPHN7a39f2859ec9: Localisation updates from https://translatewiki.net.
rEPHN1223d267c897: Copy aria-label attr from HTML to JS

Event Timeline

dom_walden created this task.Jan 26 2023, 9:40 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 26 2023, 9:40 AM

dom_walden added a project: Accessibility.Jan 26 2023, 9:40 AM

dom_walden moved this task from Unsorted to ARIA on the Accessibility board.

TheresNoTime subscribed.Jan 26 2023, 5:38 PM

It sounds like we should move aria-label to the <a> element, although the page linked above suggests that that will only work when the href="" attribute is also present (which it isn't always for us). Probably, we should be actually using a <button> for phonos, because we're making it into a button; I think there might be issues with doing that (does it support all the styling we need?).

Change 886315 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/Phonos@master] Move aria-label to be on anchor, and remove `text` from it

https://gerrit.wikimedia.org/r/886315

gerritbot added a project: Patch-For-Review.Feb 3 2023, 8:20 AM

Samwilson claimed this task.Feb 4 2023, 1:27 AM

Samwilson edited projects, added Community-Tech (CommTech-Sprint-40); removed Community-Tech.

Samwilson moved this task from Ready 🎬 to Review/Feedback 💬 on the Community-Tech (CommTech-Sprint-40) board.Feb 4 2023, 1:34 AM

Samwilson moved this task from Review/Feedback 💬 to In Development 💻 on the Community-Tech (CommTech-Sprint-40) board.

I'm glad you're getting rid of the phrase "the IPA pronunciation of ___" by the way. I was going to say it's like calling water "the chemical formula compound of H₂O".

Samwilson moved this task from In Development 💻 to Review/Feedback 💬 on the Community-Tech (CommTech-Sprint-40) board.Feb 7 2023, 6:54 AM

Change 886315 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Move aria-label to be on anchor, and remove `text` from it

https://gerrit.wikimedia.org/r/886315

Samwilson mentioned this in rEPHN2de4bf30098b: Move aria-label to be on anchor, and remove `text` from it.Feb 9 2023, 1:45 AM

This is working on Orca now, as far as I have tested.

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.23; 2023-02-13).Feb 9 2023, 2:00 AM

Maintenance_bot removed a project: Patch-For-Review.Feb 9 2023, 2:30 AM

The aria-label is read by NVDA, Orca, VoiceOver and Android TalkBack.

For NVDA, Orca and TalkBack:

It reads the aria-label both when reading the entire line/document and when the Phonos button has focus
If the Phonos button has an error it will read the label or IPA but not the aria-label. If the button does not have a label or IPA it will read the aria-label.

For VoiceOver:

When reading a whole line/document, it does not read the aria-label and instead tries to pronounce the label/IPA
- Regardless of whether the button has an error or not
When reading whole line/document, if no label or IPA, it just ignores it (you wouldn't know a link/button was there)
- Regardless of whether the button has an error or not
It only reads aria-label if the Phonos button has focus (regardless of whether it has a label/IPA or not)
It ignores the Phonos button when it is on a line on its own (when you try to read the page line by line). The only way to make it read it is to give the button focus.

Example cases for testing: https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Accessibility_Cases.

Test environment: https://en.wikipedia.beta.wmflabs.org Phonos 0.1.0 (7a39f28) 09:12, 9 February 2023.
Test platforms:

NVDA Windows 11 Chrome 109 (emulated on Browserstack)
Orca 3.38.2 Debian Bullseye Chromium 110
TalkBack Samsung Galaxy S22 (emulated on Browserstack)
VoiceOver Mac OS Monterey Safari 15.6 (emulated on Browserstack)

@Samwilson Do you want to add an estimate to this?

Done, thanks for reminding me.

The code changes here are simple really. I'm still pretty confused about how it's all meant to work though! Why doesn't it read the content of the button? I guess the label is meant to give all the context. But that doesn't seem to be the case for other label/input pairs, nor for other anchors (although maybe an anchor with an aria-label becomes something different).

aria-label not read by NVDA or OrcaClosed, ResolvedPublic2 Estimated Story PointsBUG REPORTActions