• 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