What does this accessibility issue mean?
Accessibility issue summary: Inaccessible ARIA input field name
ARIA input field names help users of assistive technologies (like screen readers) understand the purpose and function of input fields on your website.
To comply with WCAG Level A rules, you should include a label or aria-label attribute on input fields.
Example HTML violation: Inaccessible ARIA input field name (WCAG 2.0 Level A Issue)
<form action="/submit_form" method="POST">tt
<div id="aria-input-field-name-listbox" role="listbox">
<div role="option">Option 1</div>
<div role="option">Option 1</div>
</div>
<input type="submit" value="Submit" />
</form> The above HTML violates the 'aria-input-field-name' rule because the listbox element does not have an accessible name.
An accessible name is a word or phrase coded in a way that assistive technologies can associate it with a specific user interface object.
How to fix "Inaccessible ARIA input field name (WCAG 2.0 Level A Issue)" issue
<form action="/submit_form" method="POST">
<div id="aria-input-field-name-listbox" role="listbox" aria-label="Select an option">
<div role="option">Option 1</div>
<div role="option">Option 2</div>
</div>
<input type="submit" value="Submit" />
</form> In this corrected version:
- The listbox element has the
aria-labelattribute with a descriptive name ("Select an option").
This code complies with the WCAG rule that each ARIA input field must have an accessible name.
More information on this rule can be found on the Web Content Accessibility Guidelines (WCAG).
