4.1.2 Name, Role, Value

What does it mean?

Assistive technology needs to know for each control what it is called (name), what it is (role, for example button, link, checkbox) and what state it is in (for example expanded, selected, checked). Native HTML elements such as <button>, <a href> and <input> provide this automatically.

Custom controls built from <div> or <span>, such as menus, tabs, accordions and toggles, must provide this information through ARIA and update it when the state changes. This applies to all user interface components, including those added by plug-ins or third-party scripts.

Who does it help?

• Screen reader users, who need to know what a control does and what state it is in
• Speech control users, who activate controls by name
• Keyboard users, who depend on real buttons and links to reach controls

Common failures

• A clickable <div> used as a button with no role, name or keyboard support
• An icon button without a text alternative, announced only as "button"
• An accordion or menu that opens visually but does not report "expanded" or "collapsed"
• A custom toggle switch that does not announce whether it is on or off

How we test it

• axe-core Automatic: axe-core finds typical violations. A violation is pre-filled as “fails”.

Test question: Custom controls (menus, tabs, accordions, toggles) expose name, role and state to assistive technology. Check with a screen reader.

A person decides every criterion. No criterion ever passes automatically.

How to fix it

<div class="toggle" onclick="toggleMenu()">Menu</div>
<ul id="menu" hidden>…</ul>

<button type="button" aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>…</ul>
<script type="module">
  const btn = document.querySelector('[aria-controls="menu"]');
  btn.addEventListener('click', () => {
    const open = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!open));
    document.getElementById('menu').hidden = open;
  });
</script>

A real button provides name and role, and aria-expanded reports whether the menu is open.

Practical tips

• Use native HTML elements first; add ARIA only where no native element exists.
• Check with a screen reader that each control is announced with name, role and state.

Guides and patterns on this

• The right alt text in five questionsGood alt text replaces what an image does on the page, not just what it shows. Five questions lead you to the right answer for every image.
• Your first screen reader test in 30 minutesA screen reader shows without mercy whether your page is built properly. This guide lets you test your key pages yourself, with free tools and no prior experience.
• EAA compliance check: how to get your website tested for accessibilityThe European Accessibility Act asks for accessible services, not for a particular test. This guide explains what each kind of check can tell you, how an audit works, what ours costs, and what you hold at the end.
• Cookie banners that lock no one outThe cookie banner is often the first thing visitors meet, and for some the last: if it cannot be used with a keyboard or screen reader, the site is closed to them. Here is how to get it right.

Official source

Understanding WCAG 2.2 at the W3C: 4.1.2 Name, Role, Value