Problem/Motivation
There's a set of checkboxes from Content moderation module which have no programatically-determinable name, which is an accessibility problem.
The checkboxes are for selecting which content entity bundles get workflow behaviour. They're found in a table, in a dialog, in the workflow config section called "This workflow applies to".
Unlabelled form inputs are a WCAG failure at level A. A person using assistive technology like a screen reader may have considerable difficulty understanding whether they have selected the correct checkboxes. See F68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name.
Steps to reproduce
- Install standard profile.
- Enable the Content moderation module.
- Visit admin/config/workflow/workflows/manage/editorial?destination=/admin/config/workflow/workflows
- In the last table ("This workflow applies to:"), press the Select button for Content types.
- The dialog which appears("Select the content types for the Editorial workflow") has a table of Content type bundles: basic page, article, etc.. The corresponding checkboxes in each row have no associated label element.
- If using a screen reader, these checkboxes will both be announced as "checkbox, not checked", with no accessible name for the checkbox.
Proposed resolution
Add an accessible name to these checkboxes, which can be conveyed to assistive technology. A screen reader ought to announce the checkbox as "basic page, checkbox, not checked".
Any of the following approaches will work. These are in order of preference - only use ARIA attributes if the HTML label element is too hard to achieve.
- Make the visible bundle name in the second column into a
<label for>
the checkbox in column one. Like the pattern on admin/modules. This has the advantage of being clickable itself, so it's an improvement for mouse + touchscreen users too. Attempted in patch #7, partial success. - A
<label for>
in the first column, with a.visuallyhidden
class. DONE in patch #9, success. - An
aria-labelledby
attribute on the checkbox, with and ID reference pointing to the visible content type bundle name in the 2nd column - An
aria-label="Basic page"
on the checkbox input element, with the right bundle name, - A
title
attribute on the checkbox, with the name of hte content type bundle.
(Note: the phrasing varies between screen readers, operating systems, and locales. For example some say tickbox instead of checkbox. Don't worry about these differences, they're not up to us. The important thing is that each checkbox you can understand what each checkbox is for.)
Remaining tasks
Patch.
Tests, to ensure the checkbox label is present?
User interface changes
Fixes an accessibility problem with unlabeled form elements.
No changes to visual design.
API changes
None.
Data model changes
None.