Help:Extension:Phonos/QA/Accessibility

Considerations

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?

Testing

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 Invalid ARIA attribute name: aria-description. This is probably because aria-description is still in draft.

For Phonos tags without either ipa parameter or a label it warned Links must have discernible text. This could happen if a user only supplies a file or wikidata because ipa is now optional. Worth following up with this after phab:T321436 as we may be adding aria-label 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 #202122) 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 #eaf3ff. 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 #eaecf0, the speaker icon is #727375 and the text colour is #202122.

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 phab:T321436 (and perhaps phab: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 <span>, which apparently is not reliable. I raised phab: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.

As an aside, VoiceOver reads "Phonos" as "P.H. oh-noes".

For Phonos buttons with errors, if they are part of a sentence they will be read (but they have no aria-label) but if they are on a line on their own they will be skipped over.

I spent most of the time working out how to control the different screenreaders, so got less testing done. This session might need to be repeated at a later date, or when I am more familiar with how to operate screenreaders.

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 phab: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 phab: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.