4.1.2 Name, Role, Value

Image map areas have no text alternative

Each image-map area needs a text alternative for its link.

Who it affects. A screen reader announces each region of the image map as a link with no name, so blind people can't tell where any of them go.

How to fix it. Give every area with an href an alt that says where the link goes.

<area shape="rect" coords="0,0,80,40" href="/west" alt="West region">

Elements use an ARIA attribute their role does not allow

An ARIA attribute this role doesn't support is ignored or misreported by assistive technology.

Who it affects. A screen reader ignores the attribute or reports something the element can't do, which misleads blind people.

How to fix it. Remove the attribute, or change the role to one that supports it.

<button aria-pressed="false">Mute</button>
<!-- aria-checked belongs on a checkbox, not a button -->

Braille attributes have no matching text label

A braille label or description with no spoken equivalent leaves speech users with nothing.

Who it affects. People who use speech instead of a braille display hear no name or description for the element.

How to fix it. Add an aria-label or aria-description whenever you set aria-braillelabel or aria-brailleroledescription.

<button aria-label="Mute" aria-braillelabel="mute">
  <svg aria-hidden="true">…</svg>
</button>

Custom buttons, links or menu items have no accessible name

A control with a button, link or menu item role needs an accessible name.

Who it affects. A screen reader announces the role with no name, so blind people don't know what the control does.

How to fix it. Use a native button or a element. If you can't, put text inside the element or add an aria-label.

<button type="button">Archive</button>
<!-- rather than <div role="button"></div> -->

Elements use an ARIA attribute wrongly for their role

An ARIA attribute used where its role doesn't allow it here is ignored or misreported.

Who it affects. A screen reader reports a state the element doesn't have, for example a native checkbox's aria-checked contradicting what is shown.

How to fix it. Remove the attribute; on native elements, let the element's own state do the work.

<input type="checkbox" checked>
<!-- no aria-checked on a native checkbox -->

Elements use a deprecated ARIA role

A deprecated role may not be recognized, so the element's purpose is lost.

Who it affects. Newer screen readers may ignore the role, so blind people aren't told what the element is.

How to fix it. Replace the deprecated role with its current equivalent, or the native element.

<ul>…</ul>
<!-- rather than role="directory" -->

Page bodies are hidden from assistive technology

aria-hidden="true" on the body hides the whole page from assistive technology.

Who it affects. A screen reader finds nothing on the page, so blind people can't read or use any of it.

How to fix it. Remove aria-hidden from the body. To hide what's behind a dialog, use the inert attribute on the page's other content.

<body>
  <main inert>…</main>
  <div role="dialog">…</div>
</body>

Hidden elements can still take focus

Focus can land on something hidden from screen readers, so keyboard users hear nothing.

Who it affects. Keyboard focus moves to a control a screen reader can't see, so blind people hear silence and don't know where they are.

How to fix it. Take the controls inside an aria-hidden area out of the tab order, or remove aria-hidden. The inert attribute does both.

<div aria-hidden="true" inert>
  <a href="/offer">Offer</a>
</div>

Custom inputs have no accessible name

A field built from ARIA needs an accessible name, or a screen reader can't say what to enter.

Who it affects. A screen reader announces an edit field or combobox with no name, so blind people don't know what to type or pick.

How to fix it. Name the field with aria-labelledby pointing at its visible label, or use a native input with a label.

<span id="city-label">City</span>
<div role="combobox" aria-labelledby="city-label" aria-expanded="false"></div>

Elements use an ARIA attribute their role prohibits

An aria-label on an element that can't be named is ignored, so the text is lost.

Who it affects. A screen reader ignores the label on a div or span with no role, so blind people never hear the text meant for them.

How to fix it. Put the text in the content, visually hidden if needed, or give the element a role that can be named.

<span class="sr-only">3 unread messages</span>

<span className="sr-only">3 unread messages</span>

ARIA roles are missing a required attribute

A widget missing a state its role requires (such as aria-checked) can't report that state to assistive technology.

Who it affects. A screen reader can't say whether a custom checkbox is checked, or where a slider is, so blind people can't tell its state.

How to fix it. Add the attributes the role requires and keep them in sync with the state, or use the native element, which does it for you.

<div role="checkbox" aria-checked="false" tabindex="0">Remember me</div>
<!-- or <input type="checkbox"> -->

<div role="checkbox" aria-checked={checked} tabIndex={0}>Remember me</div>

Elements set a role description on a role that does not support it

A role description on an element without a suitable role is ignored or confuses the announcement.

Who it affects. A screen reader announces a made-up role name that doesn't match what the element does, which misleads blind people.

How to fix it. Only use aria-roledescription on an element with a real interactive or landmark role, or remove it.

<section role="region" aria-roledescription="slide" aria-label="1 of 5">…</section>

Elements have an invalid ARIA role

An invalid role leaves assistive technology unable to say what the element is.

Who it affects. A screen reader ignores the role, so blind people aren't told that the element is a button, tab or dialog.

How to fix it. Use a role from the ARIA specification, spelled exactly, or the native element.

<div role="dialog" aria-labelledby="t">…</div>
<!-- not role="modal" -->

Tabs have no accessible name

A tab with no accessible name can't be told apart from the other tabs.

Who it affects. A screen reader announces "tab, 2 of 4" with no name, so blind people can't tell which panel it opens.

How to fix it. Put text inside each element with role="tab", or add an aria-label.

<button role="tab" aria-selected="true" aria-controls="p1">Invoices</button>

Custom toggles have no accessible name

A checkbox, switch or radio built from ARIA needs an accessible name, or a screen reader announces an unnamed toggle.

Who it affects. A screen reader announces "checkbox, not checked" with no name, so blind people don't know what they are turning on.

How to fix it. Name the toggle with aria-labelledby pointing at its visible label, or use a native input with a label.

<label><input type="checkbox" name="remember"> Remember me</label>

Tooltips have no accessible name

A tooltip with no text gives assistive technology nothing to announce.

Who it affects. A screen reader announces an empty tooltip, so the hint sighted people see is lost to blind people.

How to fix it. Put the tooltip's text inside the element with role="tooltip".

<div role="tooltip" id="tip">Due in 3 days</div>

ARIA attributes do not exist

A misspelled or unknown ARIA attribute is ignored, so the state it meant to report is lost.

Who it affects. Assistive technology ignores the attribute, so blind people never hear the state or label it was meant to give.

How to fix it. Correct the attribute's name to a real ARIA attribute.

<button aria-pressed="true">Bold</button>
<!-- not aria-presed -->

ARIA attributes have invalid values

An ARIA attribute with an invalid value reports a wrong or missing state to assistive technology.

Who it affects. A screen reader reports a wrong state, or none, for example a menu announced as closed while it is open.

How to fix it. Use a value the attribute allows: true or false for states, and ids that exist for references such as aria-controls.

<button aria-expanded="false" aria-controls="menu">Account</button>
<ul id="menu" hidden>…</ul>

<button aria-expanded={open} aria-controls="menu">Account</button>

Buttons have no accessible name

A button with no accessible name is announced only as "button", so people using a screen reader don't know what it does.

Who it affects. A screen reader announces "button" with no name, so blind people don't know what it does. Voice control users can't say its name to press it.

How to fix it. Put text in the button. For an icon-only button, add an aria-label that says what it does and hide the icon.

<button type="button" aria-label="Delete invoice">
  <svg aria-hidden="true">…</svg>
</button>

Ids are used more than once

Two elements with the same id can break the label and description relationships that point at them.

Who it affects. A label, description or aria-controls can point at the wrong element, so a screen reader names or describes a field wrongly.

How to fix it. Give every id on the page its own value. In React, a component rendered more than once creates its ids with useId().

<label for="billing-email">Email</label>
<input id="billing-email">

const id = useId();
<label htmlFor={id}>Email</label>
<input id={id} />

Ids used by labels or ARIA references are repeated

When ARIA points at an id that two elements share, it can attach to the wrong one.

Who it affects. A label or description can attach to the wrong element, so a screen reader announces the wrong name.

How to fix it. Give every id on the page its own value. In React, create ids with useId().

<label for="email-1">Email</label>
<input id="email-1">

const id = useId();
<label htmlFor={id}>Email</label>
<input id={id} />

Frames have no title

A frame with no title gives a screen reader nothing to announce as its name.

Who it affects. A screen reader announces "frame" with no name, so blind people can't tell what is embedded or whether to enter it.

How to fix it. Give the iframe a title that says what it contains.

<iframe src="/map" title="Office location map"></iframe>

Frames have the same title as another frame

Two frames with the same title can't be told apart.

Who it affects. A screen reader lists frames by title, so blind people can't tell two frames with the same title apart.

How to fix it. Give each iframe on the page its own title.

<iframe src="/chart/q1" title="Q1 sales chart"></iframe>
<iframe src="/chart/q2" title="Q2 sales chart"></iframe>

Input buttons have no accessible name

An input button with no value or label is announced only as "button".

Who it affects. A screen reader announces "button" with no name, so blind people don't know what it does.

How to fix it. Give the input type button, submit or reset a value that says what it does.

<input type="submit" value="Save changes">

Image buttons have no text alternative

An image button with no text alternative gives a screen reader nothing to announce as the button's name.

Who it affects. A screen reader announces "button" with no name, so people who can't see the image don't know what pressing it does.

How to fix it. Add an alt to the input type="image" that says what the button does, not what the image looks like.

<input type="image" src="/search.svg" alt="Search">

Form fields have no label

A form field with no label is announced without saying what to enter.

Who it affects. A screen reader announces "edit text" with no name, so blind people don't know what to type. Without a label element, clicking the field's name doesn't focus it, so people with limited dexterity have a smaller target.

How to fix it. Add a label element tied to the field with for and id, or wrap the field in the label. A placeholder is not a label.

<label for="email">Email</label>
<input id="email" type="email" name="email">

<label htmlFor="email">Email</label>
<input id="email" type="email" name="email" />

Links have no accessible name

A link with no accessible name is announced only as "link", so assistive technology can't say what it is.

Who it affects. A screen reader announces "link" and nothing else, often an icon link, so blind people can't tell where it goes. Voice control users can't say its name to follow it.

How to fix it. Give the link text. For an icon-only link, add an aria-label and hide the icon from assistive technology.

<a href="/pricing" aria-label="Pricing">
  <svg aria-hidden="true">…</svg>
</a>

Controls contain another control

A control inside another control can't be reached or announced reliably.

Who it affects. A screen reader announces only the outer control, so the inner button or link is hidden from blind people and hard to reach by keyboard.

How to fix it. Don't put a button or link inside another button or link. Place them side by side.

<div class="card">
  <a href="/invoice/42">Invoice 42</a>
  <button type="button">Delete</button>
</div>

<div className="card">
  <a href="/invoice/42">Invoice 42</a>
  <button type="button">Delete</button>
</div>

Selects have no accessible name

A select with no label is announced without saying what the choice is for.

Who it affects. A screen reader announces "combo box, Monthly" with no name, so blind people hear the value but not what they are choosing.

How to fix it. Add a label element tied to the select with for and id.

<label for="period">Billing period</label>
<select id="period" name="period">…</select>

<label htmlFor="period">Billing period</label>
<select id="period" name="period">…</select>

Loading indicators have no accessible name

A loading indicator with no accessible name can't report its state to assistive technology.

Who it affects. Screen reader users hear nothing while the page loads, so they don't know to wait.

How to fix it. Give the spinner a text alternative: visually hidden text inside a role="status" container, or role="progressbar" with an aria-label.

<div role="status">
  <span class="spinner" aria-hidden="true"></span>
  <span class="sr-only">Loading invoices</span>
</div>

<div role="status">
  <span className="spinner" aria-hidden="true" />
  <span className="sr-only">Loading invoices</span>
</div>

Disclosure summaries have no accessible name

A summary with no text gives its disclosure no name.

Who it affects. A screen reader announces an unnamed disclosure, so blind people don't know what opening it will show.

How to fix it. Put text inside the summary element.

<details>
  <summary>Billing history</summary>
  …
</details>