aria-input-field-name
ARIA input fields have an accessible name
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
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>101112<!-- 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)
Recommended Reading
- Understanding Name, Role, Value
- Introduction to ARIA - Google Developers
- WAI-ARIA Overview