Page MenuHomePhabricator

[Epic] WiKit components should be fully usable by screen readers
Open, Needs TriagePublic

Description

The aim of this epic is to detect & document (by performing an accessibility audit) the current issues that make WiKit components not fully usable with any of the most used screen-reading technology: VoiceOver, JAWS and NVDA.

Current status, WIP: using VoiceOver (default MacOS assistive tech) and the "Screenreader" Chrome extension to test WiKit components + Incorporating feedback and observations from 1 user test performed with the Query Builder.

ComponentIssuePossible solutions
LookupWhen the lookup component is focused, screen readers (VoiceOver) currently announce: "You are currently on a text field. To enter text in this field, type", which is incorrect. Users should be aware that they need to type text to display a list of choices.1. Apply the right role attribute (combobox) to the component, use aria-autocomplete="list", aria-haspopup="listbox", aria-owns="#IDREF", aria-activedescendant="IDREF" and aria-expanded (true/false) or so the right component and instructions are announced to users. 2. Use live regions to let users know how many results are available. (See WAI-ARIA example)
OptionsMenu(In VoiceOver) The content of the menu is announced as “text”: the existence of selectable options and how to navigate to them or select them is not stated.Apply role="listbox" and an aria-label to the menu component, and the role="option" and aria-selected="true"(when applicable) to the menu options. (See WAI-ARIA example)

Notes & comments:

Lookup: This component only works with manual selection: The character string typed by users won't become the value of the input unless the user selects a value in the popup. This already causes some confusion for users* (as seen in QB tests), but is specially problematic for the visually impaired, who are totally unaware of the existence of an options menu.

Should we modify the design pattern and make Lookups work with automatic selection? So, when the options menu is triggered, the first suggestion is automatically highlighted as selected. The automatically selected suggestion becomes the value of the input when the lookup loses focus unless the user chooses a different suggestion or changes the character string in the input.

Event Timeline

  1. Detect & document (by performing an accessibility audit) the current issues that make WiKit components not fully usable with any of the most used screen-reading technology: VoiceOver, JAWS and NVDA.

The PR below introduces jest-axe unit tests which take us one step closer to the goal above by making sure we have accessibility standards-compliant markup.
https://github.com/wmde/wikit/pull/418

Sarai-WMDE renamed this task from WiKit components should be fully usable by screen readers to [Epic] WiKit components should be fully usable by screen readers.May 5 2021, 11:43 AM
Sarai-WMDE renamed this task from [Epic] WiKit components should be fully usable by screen readers to [Epic] WiKit components should be fully usable by screen readers (WIP).May 12 2021, 6:17 PM
Sarai-WMDE updated the task description. (Show Details)
Sarai-WMDE renamed this task from [Epic] WiKit components should be fully usable by screen readers (WIP) to [Epic] WiKit components should be fully usable by screen readers.May 18 2021, 11:42 AM
Sarai-WMDE updated the task description. (Show Details)