4.1.2 Name, Role, Value

What WCAG 4.1.2 Requires

Every custom UI component (built with <div> or <span> rather than native HTML) needs the correct name, role and state exposed through ARIA, so assistive technology can identify and operate it correctly.

Can AccessBell Test This Automatically?

Yes. AccessBell's scanner runs axe-core, which includes 28 rules that catch code-level failures of this criterion:

• area-alt — Ensure <area> elements of image maps have alternative text (details (opens in a new tab))
• aria-allowed-attr — Ensure an element's role supports its ARIA attributes (details (opens in a new tab))
• aria-braille-equivalent — Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent (details (opens in a new tab))
• aria-command-name — Ensure every ARIA button, link and menuitem has an accessible name (details (opens in a new tab))
• aria-conditional-attr — Ensure ARIA attributes are used as described in the specification of the element's role (details (opens in a new tab))
• aria-deprecated-role — Ensure elements do not use deprecated roles (details (opens in a new tab))
• aria-hidden-body — Ensure aria-hidden="true" is not present on the document body. (details (opens in a new tab))
• aria-hidden-focus — Ensure aria-hidden elements are not focusable nor contain focusable elements (details (opens in a new tab))
• aria-input-field-name — Ensure every ARIA input field has an accessible name (details (opens in a new tab))
• aria-prohibited-attr — Ensure ARIA attributes are not prohibited for an element's role (details (opens in a new tab))
• aria-required-attr — Ensure elements with ARIA roles have all required ARIA attributes (details (opens in a new tab))
• aria-roles — Ensure all elements with a role attribute use a valid value (details (opens in a new tab))
• aria-tab-name — Ensure every ARIA tab node has an accessible name (details (opens in a new tab))
• aria-toggle-field-name — Ensure every ARIA toggle field has an accessible name (details (opens in a new tab))
• aria-tooltip-name — Ensure every ARIA tooltip node has an accessible name (details (opens in a new tab))
• aria-valid-attr-value — Ensure all ARIA attributes have valid values (details (opens in a new tab))
• aria-valid-attr — Ensure attributes that begin with aria- are valid ARIA attributes (details (opens in a new tab))
• button-name — Ensure buttons have discernible text (details (opens in a new tab))
• duplicate-id-aria — Ensure every id attribute value used in ARIA and in labels is unique (details (opens in a new tab))
• frame-title-unique — Ensure <iframe> and <frame> elements contain a unique title attribute (details (opens in a new tab))
• frame-title — Ensure <iframe> and <frame> elements have an accessible name (details (opens in a new tab))
• input-button-name — Ensure input buttons have discernible text (details (opens in a new tab))
• input-image-alt — Ensure <input type="image"> elements have alternative text (details (opens in a new tab))
• label — Ensure every form element has a label (details (opens in a new tab))
• link-name — Ensure links have discernible text (details (opens in a new tab))
• nested-interactive — Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies (details (opens in a new tab))
• select-name — Ensure select element has an accessible name (details (opens in a new tab))
• summary-name — Ensure summary elements have discernible text (details (opens in a new tab))

This criterion is included in: WCAG 2.2 AA Checker, WCAG 2.1 AA Checker, ADA Compliance Checker, Section 508 Checker, EN 301 549 Checker.

How to Test It by Hand

Inspect custom components (toggles, tabs, custom dropdowns) in the browser's accessibility tree and confirm each has an appropriate role, accessible name, and reflects its current state (expanded, checked, selected).

Common Failures

• A custom checkbox built from a <div> has no role="checkbox" or aria-checked state.
• A custom dropdown never updates aria-expanded when opened.

Example Fix

1. Describe the purpose, not the pixels. Write alt text that says what the image does or shows in context, for example "Download the 2026 price list" for a linked icon.
2. Mark decorative images as decorative. Use an empty alt="" so screen readers skip images that add nothing, such as background flourishes.
3. Keep it short. One sentence is usually enough. Put longer descriptions of charts or diagrams in nearby text.

<!-- Informative image: describe its purpose -->
<img src="/team.jpg" alt="Our support team at the Denver office">

<!-- Image inside a link: describe where the link goes -->
<a href="/pricing"><img src="/icon-tag.svg" alt="Pricing"></a>

<!-- Decorative image: empty alt so it is skipped -->
<img src="/divider.svg" alt="">

Related Criteria in Compatible

• 4.1.1 Parsing (obsolete in WCAG 2.2)Level A · WCAG 2.0
• 4.1.3 Status MessagesLevel AA · WCAG 2.1

WCAG 4.1.2 Questions