Current issues
Many elements are missing information about role, state and how the user can interact with it using keyboard navigation.
- Related criteria and techniques: https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=412#name-role-value and https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=332#labels-or-instructions
- Information on aria-describedby https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1.html
Requirements
Search field
- Role of search should be clearly defined, possibly done with landmark in T291281?
- Placeholder text is not sufficient to explain what is being searched. For screen readers, the label should be "Parameter search for $Template name"
Parameter list
- When entire list is focused, it should be announced as "Parameters in $Template name".
- Role should make clear what the list is and how to interact with this. Currently announced as list box. This should be correct and imply navigation by arrow keys, so this instruction does not need to announced. (Check if multi-select a better fit?)
- Instructions for interacting with checkboxes within the list are announced using aria-describedby: "Press Space to add or remove parameters. Press Enter to add a parameter and immediately edit its value. When a parameter is already selected, press Enter to edit the value."
Checkboxes
-
Checkboxes have the checkbox roleHave the options role see comment below - Checkbox state is announced
(currently only unselected are announced but not selected)
Note: Required parameters are represented as disabled checkboxes in the sidebar. Make sure screenreader users can understand this. Possibly remove the checkbox. Possibly make use of OO.ui.mixin.RequiredElement (sets aria-required, see https://gerrit.wikimedia.org/r/711145 ). From https://stackoverflow.com/q/34300154#comment85584639_34300154: //"For checkboxes, regardless if checked or not a value is passed to through the form. If you want to communicate that the user must check a checkbox to proceed / submit, then such a message should be associated through us of the aria-describedby attribute pointing to a text container (via that container's ID attribute)."
~~~For multi-part template content only:~~~
Wikitext element
- Label should be announced and instructions should be available (possibly under aria-describedby so that users can choose if they want to hear the instructions instead of it repeating every time)
- When in focus and unselected, "Press Space to select the wikitext element. Press Enter to select and edit the wikitext."
- When in focus and selected, "Press Ctrl+Del to delete the wikitext element. Press Ctrl+Shift+Arrows to move the element up or down."
Template names
- Label should be announced and instructions should be available (possibly under aria-describedby so that users can choose if they want to hear the instructions instead of it repeating every time)
- When in focus and unselected, "Press Space to select the template."
- When in focus and selected, "Press Ctrl+Del to delete the template, its parameters and their values. Press Ctrl+Shift+Arrows to move the template up or down."
