Digital Accessibility Knowledge Base

aria-input-field-name

ARIA input fields have an accessible name

Who might be affected
Screen Reader
Voice Control

Description

In some cases, and for various reasons, a developer might choose to use generic elements (e.g. <div>, <span>) instead of semantic inputs (e.g. form inputs, buttons etc.), c oercing the semantics by using the ARIA role attribute. Screen readers refer to these elements as inputs per se, therefore, as with semantic inputs, these elements require an accessible name so that screen readers can accurately convey their meaning and purpose to the user.

Quick Fixes

Label ARIA inputs using one of the following techniques:
1<!-- Use "aria-label" -->
2<div role="listbox" aria-label="browsers">
3    <!-- The internal divs contain text nodes,
4         that make up their accessible names -->
5    <div role="option">Chrome</div>
6    <div role="option">Edge</div>
7    <div role="option">Explorer</div>
8    <div role="option">FireFox</div>
9</div>
10

11

12<!-- Use "aria-labelledby" -->
13<p id="app-check">Approve</p>
14<div role="checkbox"
15     aria-labelledby="app-check"
16     aria-checked="false"></div>
17

How Users Are Affected

The accessible name is used by assistive technologies to label, announce and trigger actions of interactable UI elements (e.g. buttons, links, input fields, etc.). When interactable elements don’t have a valid accessible name, assistive technologies lack the hook they are designed to use to parse and read the content accurately.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
4.1.2 Name, Role, Value (A)