WCAG 4.1.2 Name, Role, Value: what it means and how to fix it

Level A · Robust · Updated

Short answer: Buttons, toggles, menus and custom widgets must expose a name, a role and their current state to assistive technology. Icon-only buttons with no label are the classic failure.

What it requires

For every user interface component, assistive technology must be able to determine its name (what it is called), its role (button, checkbox, tab, dialog) and its state or value (expanded, checked, selected), and be notified when these change.

Who it affects

Screen reader and voice-control users. A button with no name is announced only as "button", and a custom drop-down built from divs may not be announced at all.

How it shows up in ADA website claims

Unlabeled buttons, such as cart, menu, close, quantity plus/minus, and carousel arrows, are one of the most common findings on sued sites, along with custom size and color selectors that do not report which option is selected.

How to check your site

  1. An automated scan flags buttons, frames and ARIA widgets with no accessible name.
  2. With a screen reader, operate menus, accordions and variant pickers: does it announce "expanded", "selected", "checked"?
  3. Check embedded iframes (maps, videos, chat) for a title.

How to fix it

<!-- Fails: icon-only button with no name -->
<button class="close"><svg>...</svg></button>

<!-- Passes -->
<button class="close" aria-label="Close dialog"><svg aria-hidden="true">...</svg></button>

<!-- Menu toggle that reports its state -->
<button aria-expanded="false" aria-controls="menu">Menu</button>

<!-- Embedded frame -->
<iframe src="https://maps..." title="Map to our store"></iframe>

Prefer native elements (button, select, input type="checkbox") over custom widgets; they get name, role and value for free.

Frequently asked questions

What does "button has no discernible text" mean?

The button contains only an icon or image and has no aria-label, title or visually hidden text, so assistive technology cannot name it.

Is ARIA required?

Only for custom widgets. Native HTML controls already expose name, role and value. Incorrect ARIA can make things worse.

Does the obsolete 4.1.1 Parsing still matter?

WCAG 2.2 removed 4.1.1 and the W3C treats it as always satisfied for HTML. Focus on 4.1.2 instead.

Automated rules that test this (axe-core): button-name, aria-command-name, aria-input-field-name, aria-toggle-field-name, frame-title, aria-allowed-attr, aria-valid-attr-value, aria-hidden-focus, select-name. Our scanner runs these checks.

Other commonly cited criteria

Read the official WCAG 2.1 specification at W3C.

Proof of Access provides technical accessibility assessments. We are not a law firm and nothing on this page is legal advice. If you have received a demand letter or a lawsuit, talk to an attorney.