- Success Criterion 4.1.2
- Conformance level A
Rich Text Editor With No Role, Name, or State Exposed
4.1.2 — Name, Role, Value
Scenario
Setting
A social media platform's settings menu
What’s wrong
contenteditable (editable-area code) rich editors with no role/name/state exposure.
Example
<div class="checkbox" onclick="toggle()"></div> Why it matters
Screen-reader and voice-control users who can operate only what the accessibility tree exposes.
How to test
Inspect a rich-text/contenteditable editor in DevTools: check for role="textbox", aria-multiline, and an accessible name — missing any fails.
How to fix
Give rich-text editors role='textbox' with aria-multiline and an accessible name.
<input type="checkbox" id="opt-1"><label for="opt-1">Email notifications</label>A native input exposes its role and checked state automatically; a styled div exposes none of that without a lot of manual ARIA.
Outcome
On a social media platform's settings menu, this barrier is gone for screen-reader and voice-control users who can operate only what the accessibility tree exposes — they can finish what they came here to do.
Who is affected
Screen-reader and voice-control users who can operate only what the accessibility tree exposes.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Custom Dropdown or Slider With No Accessibility API Support
- Content Changes That Never Update Their Accessible Name
- Scripted Link or Button With No Real Role or Keyboard Support
- Clickable Div Turned Into a Control but Given No ARIA Role
- Form Field With No Programmatic Label at All
- Assistive Technology Never Told Which Element Currently Has Focus