-
Notifications
You must be signed in to change notification settings - Fork 171
Open
Description
Problem
When assessing WCAG 2.1 AA conformance in a project shipped with reat-simple-code-editor
as a dependency using this tool, the textarea
is failing Success Criterion 4.1.2: Name, Role, Value here:
<textarea
style="margin: 0px; border: 0px; background: none; box-sizing: inherit; display: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; tab-size: inherit; text-indent: inherit; text-rendering: inherit; text-transform: inherit; white-space: pre-wrap; word-break: keep-all; overflow-wrap: break-word; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; resize: none; color: inherit; overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-text-fill-color: transparent; padding: 16px;"
data-gramm="false"
spellcheck="false"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
class="npm__react-simple-code-editor__textarea">
Some suggestions
- If the control is a labelable element, add a for attribute to a visible label with the id of this control (e.g. );
- Or, if the control is a labelable element, put the control inside a visible element;
- Or, add an aria-labelledby attribute to the control. It must point to visible text on the page that is meaningful as a label;
- Or, if the design cannot have a visible label, provide a label using the aria-label attribute (e.g. aria-label="Activities");
- Or, if the design cannot have a visible label, use the title attribute to provide a label.
Proposed solution
Use the title attribute to provide a label according to WAI technique 65, whose objective is "to use the title attribute to provide an accessible name for form controls when the visual design does not include text on the screen that can be associated with the control as a label. User agents, including assistive technology, can speak the title attribute".
Who does this affect?
- People using a screen reader, including blind, low vision and neurodivergent people
- People with dexterity impairment using voice control
Next steps
Open a PR that adds a title according to WAI technique 65.
Metadata
Metadata
Assignees
Labels
No labels