Help:Extension:Phonos/QA/Accessibility

WCAG guidelines

 * Colour contrast
 * either 1.4.3 Contrast (Minimum)
 * or 1.4.11 Non-text Contrast
 * possibly 1.4.1 Use of Color
 * 1.1 – Text Alternatives
 * error conditions?
 * 1.4.4 Resize text
 * Guideline 2.1 – Keyboard Accessible
 * error conditions?

Other considerations

 * 2.5.5 Target Size (this is level AAA which we do not necessarily support)
 * 1.4.2 Audio Control
 * I guess most transcriptions won't play for more than 3 seconds (of course, a user could enter a long IPA string or play a long file from commons)
 * "...either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume..."
 * Also, it is started on user request (technique G171)
 * Still, should we have volume controls?
 * What about on a mobile device?
 * Non-JS?

axe devtools

 * Date
 * 2022-11-08


 * Environment
 * https://en.wikipedia.beta.wmflabs.org Phonos 0.1.0 (580a1d3) 07:35, 7 November 2022.

Running the axe Firefox extension.

Warned about. This is probably because  is still in draft.

For Phonos tags without either  parameter or a label it warned. This could happen if a user only supplies a  or   because   is now optional. Worth following up with this after T321436 as we may be adding  which may also solve this problem.

All other issues identified by axe were not related to Phonos elements.

Colour contrast

 * Date
 * 2022-11-08


 * Environment
 * https://en.wikipedia.beta.wmflabs.org Phonos 0.1.0 (580a1d3) 07:35, 7 November 2022.

Testing the appropriate colour contrast and use of colour of the Phonos element, including error conditions and hover/focus.



Requirements to fulfill:
 * 1.4.3 Contrast (Minimum)
 * 1.4.11 Non-text Contrast
 * (possibly) 1.4.1 Use of Color

The Phonos speaker icon and the text is black (both roughly ) on a white background, so there should be no contrast issues there.

When you hover over the Phonos element the background is changed to a light blue. This leads to a contrast ratio of roughly 14:1 with the speaker icon and text, above the 4.5:1 requirement.

However, compared to the white background the light blue has only a 1.11:1 colour contrast ratio. A user might not perceive the difference when they hover over the icon.

For error conditions, the background colour is, the speaker icon is   and the text colour is.

The contrast ratio between the speaker icon and the background is 4.01:1. This is below the 4.5:1 ratio required for WCAG 1.4.3 Contrast (Minimum) but above the 3:1 required for WCAG 1.4.11 Non-text Contrast. Arguably it is a UI component or graphical object so the latter guideline would apply.

The contrast ratio between the text and the background is 13.63:1, which is well above the 4.5:1 requirement.

Text alternatives

 * Date
 * 2023-01-26


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


 * Test platforms
 * 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 (I don't know which version) Mac Monterey Safari 15.6 (emulated in Browserstack)

Charter

Might be worth waiting for T321436 (and perhaps T320414) to be merged.

Does the Phonos element work well with screen readers? In particular, I wonder how well it works with Phonos elements which have errors. Imagine an editor who uses a screen reader who makes a mistake when adding a Phonos element. Will they know what they did wrong?

May need to test this on several different screen readers (VoiceOver, NVDA, JAWS, Orca) and different browsers (Safari, Chrome, Firefox, IE).

Otherwise, it might be sufficient to read the HTML code of the Phonos element and follow the techniques listed in 1.1.1 Non-text Content.

Notes

I attempted to simulate a user using a screenreader to read a couple of different articles which contained Phonos buttons.

I quickly found out that NVDA and Orca cannot read the aria-label on the Phonos element. This might be because it is a , which apparently is not reliable. I raised T328004.

VoiceOver will read the aria-label, but only if you give the Phonos button focus (e.g. using tab). If you allow VoiceOver to read the page "naturally" (by pressing down arrow until the entire sentence is highlighted) it will just say it is a link and spell out the IPA. For Phonos buttons without a label (e.g. Phonos_Natural3) it won't even tell you of the button's existence.

Test articles:
 * https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Natural
 * https://en.wikipedia.beta.wmflabs.org/wiki/Phonos
 * https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Natural3

Resizing text

 * Date
 * TBD


 * Environment
 * TBD

Might be worth waiting for T320820 to be merged.

"...text can be resized without assistive technology up to 200 percent without loss of content or functionality."

Remember to test both zoom AND increasing/decreasing the browsers default font size (e.g. in Firefox go to Settings > Fonts and Colors).

Test different browsers (Safari, Chrome, Firefox, IE).

If you have time, perhaps test different skins (Vector 2022, Vector 2010, Minerva, Timeless, MonoBook).

Keyboard accessible

 * Date
 * TBD


 * Environment
 * TBD

Might be worth waiting for T319295 to be merged.

Can you use the Phonos element using only a keyboard?

Consider also Phonos elements with errors. Imagine an editor trying to see work out what they did wrong.