Change Details

===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, $Template name" **Parameter list** [] When entire list is focused, it should be announced as "Parameters, $Template name". [x] 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?) **Checkboxes** [] Checkboxes have the checkbox role [] Checkbox state is announced (currently only unselected are announced but not selected) [] Instructions for interaction are available (possibly under `aria-describedby` so that users can choose if they want to hear the instructions instead of it repeating every time) - For selected checkboxes, "Press Enter to edit parameter value. Press Spacebar to remove parameter from template." - For unselected checkboxes, "Press Spacebar to add parameter to template. Press Enter to add to template and immediately add a value." 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 Spacebar to select wikitext element. Press Enter to select and edit the wikitext." - When in focus and selected, "Press Control-Delete to delete the wikitext. Press Control-Shift-Arrow to move 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 Spacebar to select entire template." - When in focus and selected, "Press Control-Delete to delete the template, its parameters and their values. Press Control-Shift-Arrow to move template up or down."

===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". [x] 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?) **Checkboxes** [] Checkboxes have the checkbox role [] Checkbox state is announced (currently only unselected are announced but not selected) [] Instructions for interaction are available (possibly under `aria-describedby` so that users can choose if they want to hear the instructions instead of it repeating every time) - For selected checkboxes, "Press Enter to edit parameter value. Press Spacebar to remove parameter from template." - For unselected checkboxes, "Press Spacebar to add parameter to template. Press Enter to add to template and immediately add a value." 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 Spacebar to select wikitext element. Press Enter to select and edit the wikitext." - When in focus and selected, "Press Control-Delete to delete the wikitext. Press Control-Shift-Arrow to move 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 Spacebar to select entire template." - When in focus and selected, "Press Control-Delete to delete the template, its parameters and their values. Press Control-Shift-Arrow to move template up or down."

===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". [x] 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?) **Checkboxes** [] Checkboxes have the checkbox role [] Checkbox state is announced (currently only unselected are announced but not selected) [] Instructions for interaction are available (possibly under `aria-describedby` so that users can choose if they want to hear the instructions instead of it repeating every time) - For selected checkboxes, "Press Enter to edit parameter value. Press Spacebar to remove parameter from template." - For unselected checkboxes, "Press Spacebar to add parameter to template. Press Enter to add to template and immediately add a value." 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 Spacebar to select wikitext element. Press Enter to select and edit the wikitext." - When in focus and selected, "Press Control-Delete to delete the wikitext. Press Control-Shift-Arrow to move 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 Spacebar to select entire template." - When in focus and selected, "Press Control-Delete to delete the template, its parameters and their values. Press Control-Shift-Arrow to move template up or down."