Free scanFree scan

Level A · WCAG 2.0

4.1.2 Name, Role, Value

Every control exposes a name, a role and its current state to assistive technology.

Partly automated Some failures are detectable, others need judgement.

Get a free scan

How it fails in practice

A div with a click handler acting as a button and announced as nothing. A custom checkbox that never reports whether it is checked.

How to fix it

Use native elements first. Where you cannot, implement the full ARIA pattern — role, name, states and keyboard behaviour together. Half a pattern is worse than none.

At a glance

Level
Level A — the minimum. Failing one of these usually makes something impossible rather than merely hard.
Principle
Robust
Guideline
4.1 Compatible
Added in
WCAG 2.0
EN 301 549
9.4.1.2
Automated check
Partly automated

Read the official definition at W3C

How to test it by hand

  1. Open the browser’s accessibility tree (developer tools → Accessibility) on every custom control: does it have a name, the right role and its current state?
  2. Operate it and watch the state change: an open menu reports that it is expanded, a selected tab that it is selected, a switch whether it is on.
  3. Listen to the controls that matter most with a screen reader — add to basket, quantity, size, payment method.
  4. Prefer native elements wherever you can: button, input type="checkbox" and select bring the name, the role and the state with them.

In code

Fails
<div class="switch on" onclick="toggle(this)"></div>
Passes
<button type="button" role="switch" aria-checked="true"
        onclick="toggle(this)">Newsletter</button>

<!-- toggle() flips aria-checked as well as the class -->

Partly automated

How far an automated check gets

A tool finds some failures here and cannot see the rest. A clean automated result means the checks that exist found nothing — not that the criterion is met. This is the gap that makes a green scan look like an accessible site, and it is where the keyboard agent, the agents still in development and a human reviewer do the remaining work.

A missing name or an invalid role is found automatically, and on a crawl from an account, controls are operated on one page per template to see whether their state changes with them. Whether the role describes what the control really does is a judgement.

Rules that check this criterion

  • area-altActive <area> elements must have alternative text
  • aria-allowed-attrARIA attribute not allowed
  • aria-braille-equivalentaria-braille attributes must have a non-braille equivalent
  • aria-command-nameARIA commands must have an accessible name
  • aria-conditional-attrARIA attributes must be used as specified for the element's role
  • aria-deprecated-roleDeprecated ARIA roles must not be used
  • aria-hidden-bodyaria-hidden="true" must not be present on the document body
  • aria-hidden-focusFocusable element inside aria-hidden
  • aria-input-field-nameARIA input field without a name
  • aria-prohibited-attrElements must only use permitted ARIA attributes
  • aria-required-attrRequired ARIA attribute missing
  • aria-rolesARIA roles used must conform to valid values
  • aria-tab-nameARIA tab nodes must have an accessible name
  • aria-toggle-field-nameARIA toggle fields must have an accessible name
  • aria-tooltip-nameARIA tooltip nodes must have an accessible name
  • aria-valid-attr-valueInvalid ARIA attribute value
  • aria-valid-attrARIA attributes must conform to valid names
  • button-nameButton without discernible text
  • duplicate-id-ariaIDs used in ARIA and labels must be unique
  • frame-title-uniqueFrames must have a unique title attribute
  • frame-titleiframe without a title
  • input-button-nameInput button without text
  • input-image-altImage button without alt text
  • labelForm field without a label
  • link-nameLink without discernible text
  • nested-interactiveNested interactive controls
  • select-nameSelect without a label
  • summary-nameSummary elements must have discernible text

The rule ids are axe-core’s (version 4.14.0), the open-source engine our scan runs, and our keyboard agent’s — the names a report or a CI log will show. An underlined id has a page of its own here.

All rules, explained

Where it matters most

The guides that list it among the criteria to check first.

Related criteria

Other criteria under the same guideline.

All WCAG 2.2 AA criteria

Further reading

  • Accessibility tree

    The structure a browser derives from the DOM, holding each element's role, name and state; screen readers and other assistive technology read from it.

  • Accessible name

    The name an element exposes to assistive technology, computed by the browser from its text content, label, alt, aria-label or aria-labelledby.

  • ARIA (WAI-ARIA)

    A W3C specification of roles, states and properties that convey meaning to assistive technology where HTML alone cannot; misused, it makes pages harder to use.

  • aria-allowed-attr

    The axe rule aria-allowed-attr flags ARIA attributes a role does not support, such as aria-selected on a button. Causes and fix with code example.

  • aria-input-field-name

    The axe rule aria-input-field-name flags custom fields with ARIA roles such as combobox or textbox that have no name. The fix – with code example.

  • aria-required-attr

    The axe rule aria-required-attr flags roles missing a required state, such as a switch without aria-checked. Causes and fix with code example.

  • aria-valid-attr-value

    The axe rule aria-valid-attr-value flags ARIA attributes with values the spec does not allow, such as aria-expanded="yes". Fix with code example.

  • button-name

    The axe rule button-name flags buttons with no accessible name – usually icon buttons. How to name them with text or aria-label, with code example.

  • frame-title

    The axe rule frame-title flags an iframe with no accessible name. Why screen reader users cannot tell embeds apart, and the fix with code example.

  • input-button-name

    The axe rule input-button-name flags input buttons (submit, reset, button) with no text. Why value="" breaks them and the fix – with code example.

  • input-image-alt

    The axe rule input-image-alt flags buttons with no text alternative. Name the action, not the picture – with code example.

  • label

    The axe rule label flags input and textarea fields with no accessible name. Why a placeholder is not a label, and the fix – with code example.

  • link-name

    The axe rule link-name flags links with no accessible name – icon links, image links without alt, empty anchors. The fix, with code example.

  • select-name

    The axe rule select-name flags select drop-downs with no accessible name. Why the chosen option is not a label, and the fix – with code example.

Find out which criteria your site fails

We scan up to 100 pages against WCAG 2.2 AA, send the keyboard agent through the page you name and email you the report — free, once, no strings.

Get a free scan See how the agent tests

Report within one working day.