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.