• 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="bio-editor" contenteditable="true"></div>
<!-- no role="textbox", no aria-label, and no aria-multiline, so it isn't identifiable as a text field -->

Why it matters

A screen reader user tabbing to the bio editor hears nothing identifying it as an editable field, so they may skip it.

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

Add role="textbox" and aria-multiline; also expose bold and italic toggle states with aria-pressed on the toolbar.

<div class="bio-editor" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Bio"></div>

Outcome

A user hears "Bio, edit text" and writes their profile description without confusion.

Who is affected

Screen reader users editing their profile bio cannot tell the contenteditable region is a text field they can type into.

Learn more

Related scenarios