Accessibility improvements when Phonos button has error
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	dom_walden
	Mar 1 2023, 10:48 AM

Description

What is the problem?

There are things that make Phonos buttons with errors less accessible for screenreader users.

For example:

If there is an error and no file parameter has been passed, the button does not have an aria-label. So this happens when you are trying to generate audio with IPA or pulling from Wikidata.
If there is an error and file is passed, the aria-label is "Play audio". As we know already that this button has an error, would could make the aria-label reflect this.
The error message popup is not accessible to screenreaders (at least not when I tested it with NVDA, Orca and VoiceOver). Therefore, the user does not know what is causing the error.

Steps to reproduce problem

See examples of error conditions here https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Errors or https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Combinations
Try to use it with different screenreaders (NVDA, Orca, VoiceOver, TalkBack)

Environment

Wiki(s): https://en.wikipedia.beta.wmflabs.org Phonos 0.1.0 (0b9e293) 19:15, 28 February 2023.

QA Results - Beta

AC	Status	Details
1	✅	https://phabricator.wikimedia.org/T330851 here

Details

Subject	Repo	Branch	Lines +/-
Add aria-live="assertive" to error popup body	mediawiki/extensions/Phonos	master	+1 -0
Change aria-label for errors, and link button and popup	mediawiki/extensions/Phonos	master	+14 -6
Always supply error messages from server	mediawiki/extensions/Phonos	master	+15 -59

Customize query in gerrit

Related Objects

Mentioned In: rEPHNc8c6053d9a9e: Add aria-live="assertive" to error popup body
rEPHN5b4f85d194d5: Change aria-label for errors, and link button and popup
rEPHNf9c5e90ed9b8: Always supply error messages from server
T325796: Fix aria-label for when 'text' is empty
Mentioned Here: rMW9f36d83f7166: Localisation updates from https://translatewiki.net.
rEPHN0b9e293c69ec: PhonosButton.js: Add hook to allow scripts to mutate the Audio object

Event Timeline

dom_walden created this task.Mar 1 2023, 10:48 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 1 2023, 10:48 AM

dom_walden mentioned this in T325796: Fix aria-label for when 'text' is empty.Mar 1 2023, 10:54 AM

dom_walden updated the task description. (Show Details)Mar 1 2023, 1:24 PM

KSiebert removed a project: Community-Tech.Jul 5 2023, 3:07 PM

Restricted Application added a project: Community-Tech. · View Herald TranscriptJul 5 2023, 3:07 PM

Aklapper removed a project: Community-Tech.Jul 5 2023, 6:07 PM

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

[mediawiki/extensions/Phonos@master] Change aria-label for errors, and link button and popup

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

gerritbot added a project: Patch-For-Review.Sep 18 2023, 2:18 AM

The error message popup is not accessible to screenreaders (at least not when I tested it with NVDA, Orca and VoiceOver). Therefore, the user does not know what is causing the error.

I'm not really sure, but it sounds like it might be correct to add aria-describedby to the button, pointing to the popup element. I've done so in the above patch.

Samwilson moved this task from Ready 🎬 to Review/Feedback 💬 on the Community-Tech (CommTech-Kanban) board.Sep 18 2023, 2:25 AM

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

[mediawiki/extensions/Phonos@master] Always supply error messages from server

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

Change 958070 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Always supply error messages from server

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

Samwilson mentioned this in rEPHNf9c5e90ed9b8: Always supply error messages from server.Sep 18 2023, 1:29 PM

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.27; 2023-09-19).Sep 18 2023, 2:00 PM

HMonroy moved this task from Review/Feedback 💬 to QA 🐛 on the Community-Tech (CommTech-Kanban) board.Sep 18 2023, 5:45 PM

Change 958069 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Change aria-label for errors, and link button and popup

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

Samwilson mentioned this in rEPHN5b4f85d194d5: Change aria-label for errors, and link button and popup.Sep 19 2023, 11:21 AM

Maintenance_bot removed a project: Patch-For-Review.Sep 19 2023, 11:30 AM

ReleaseTaggerBot edited projects, added MW-1.41-notes (1.41.0-wmf.28; 2023-09-26); removed MW-1.41-notes (1.41.0-wmf.27; 2023-09-19).Sep 19 2023, 1:01 PM

@Samwilson When the error message pops up (at least the first time), it is not automatically spoken by the screen reader. You need to reactivate the button somehow (e.g. tab away and then back).

I wonder if it would be good to use ARIA role=alert or something similar?

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

[mediawiki/extensions/Phonos@master] Add aria-live="assertive" to error popup body

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

gerritbot added a project: Patch-For-Review.Oct 20 2023, 8:22 AM

Change 967397 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Add aria-live="assertive" to error popup body

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

Samwilson mentioned this in rEPHNc8c6053d9a9e: Add aria-live="assertive" to error popup body.Oct 23 2023, 10:20 AM

Maintenance_bot removed a project: Patch-For-Review.Oct 23 2023, 10:30 AM

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.2; 2023-10-24).Oct 23 2023, 11:00 AM

Good catch. The example they give doesn't seem to work though, or at least I can't get it to read out the error messages.

However it looks like aria-live="assertive" on the popup body works.

@Samwilson The error message popup appears only VoiceOver and Talkback. All four screenreaders do say the error though as seen in the .webm's below. This will be moved to Done. Thanks for all your work!

Status: ✅PASS
Environment: Beta: 1.42.0-alpha (9f36d83)
OS: macOS Sonoma 14.0
Browser: Chrome 117, Firefox 118, Safari 17.0
Device: MBA M2
Emulated Device::BrowserStack for NVDA & Talkback
Test Links:
https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Combination

✅AC1: https://phabricator.wikimedia.org/T330851

VoiceOver-Popup &Voice	NVDA-Just Voice	ChromeVox-Just Voice	Talkback-Popup &Voice

GMikesell-WMF updated the task description. (Show Details)Oct 26 2023, 10:25 PM

GMikesell-WMF moved this task from QA 🐛 to Done 🏁 on the Community-Tech (CommTech-Kanban) board.

TheresNoTime closed this task as Resolved.Oct 31 2023, 1:36 PM

	F40428956: TB2.webm
	Oct 26 2023, 10:24 PM

	F40428867: CV2.webm
	Oct 26 2023, 10:24 PM

	F40428757: NVDA2.webm
	Oct 26 2023, 10:24 PM

	F40428775: VO2webm
	Oct 26 2023, 10:24 PM

Accessibility improvements when Phonos button has errorClosed, ResolvedPublicBUG REPORTActions