Ensure every ARIA input field has an accessible name
This rule checks that each form field element has a non-empty accessible name.
Autoren: Anne Thyme Nørregaard, Bryn Anderson
Finanzierung: WAI-Tools
This rule applies to any element that is included in the accessibility tree, and that has one of the following semantic roles: checkbox, combobox (select elements), listbox, menuitemcheckbox, menuitemradio, radio, searchbox, slider, spinbutton, switch, textbox.
Each target element has an accessible name that is not empty ("").
The list of roles in the applicability is derived by taking all the roles from WAI-ARIA Specifications that:
input, menuitem or select role; andmenu, option or tree).This rule does not test other control-like roles such as button and menuitem, because these do not inherit from input or select. These should be tested separately.
This rule does not map to 3.3.2 Labels or Instructions as there are sufficient techniques within 3.3.2 that don't need the elements to have an accessible name. For example "G131: Providing descriptive labels" AND "G162: Positioning labels to maximize predictability of relationships" would be sufficient.
There are no assumptions.
disabled ones. Therefore this rule is still applicable to disabled form fields. If an assistive technology consistently ignores disabled form fields in all its interactions, then it is possible to have a disabled form field with no accessible name without creating accessibility issues for the user.This input element has an accessible name because of its programmatic label.
<label>
first name
<input />
</label>
This input element has an accessible name because of its aria-label attribute.
<div>last name</div>
<input aria-label="last name" disabled />
This select element has an accessible name because of its programmatic label.
<label for="country">Country</label>
<select id="country">
<option>England</option>
<option>Scotland</option>
<option>Wales</option>
<option>Northern Ireland</option>
</select>
This textarea element has an accessible name because of its aria-labelledby attribute.
<div id="country">Country</div>
<textarea aria-labelledby="country"></textarea>
This input element has an accessible name because of its placeholder attribute.
Note: While the placeholder attribute is sufficient to provide an accessible name, a visible label that does not disappear when a user starts to enter data is still required for success criterion 3.3.2 Labels or Instructions.
<input placeholder="Your search query" /> <button type="submit">search</button>
This semantic combobox element has an accessible name because of its aria-label attribute.
<div>Country</div>
<div aria-label="country" role="combobox" aria-disabled="true">England</div>
This semantic checkbox element has the text content as its accessible name.
<div role="checkbox">I agree to the terms and conditions.</div>
These menuitemcheckbox elements have an accessible name because its aria-labelledby attribute references a span element.
<p id="dip">Add one or more dip:</p>
<div role="menu" aria-labelledby="dip">
<input type="checkbox" role="menuitemcheckbox" aria-labelledby="ketchup" /><span id="ketchup" aria-hidden="true"
>Ketchup</span
><br />
<input type="checkbox" role="menuitemcheckbox" aria-labelledby="mayonnaise" /><span id="mayonnaise" aria-hidden="true"
>Mayonnaise</span
>
</div>
This input element does not have an attribute that gives an accessible name to it.
<div>last name</div>
<input />
This disabled input element does not have an attribute that gives an accessible name to it.
<input disabled />
This input element has an empty ("") accessible name because the space in the aria-label attribute value is trimmed.
<input aria-label=" " />
This select element has an empty ("") accessible name because the div has no text content.
<div id="country"></div>
<select aria-labelledby="country">
<option>England</option>
</select>
This semantic textbox element has an empty ("") accessible name. The parent label element does not give it an accessible name, this only works for native form fields.
<label>
first name
<div role="textbox"></div>
</label>
This semantic textbox element has an empty ("") accessible name. The label element does not give it an accessible name, this only works for native form fields.
<label for="firstname">first name</label>
<div role="textbox" id="firstname"></div>
This semantic textbox element has an empty ("") accessible name. The text content of the element serves as its value, not as an accessible name.
<div role="textbox">first name</div>
These menuitemcheckbox elements do not have an accessible name.
<p id="dip">Add one or more dip:</p>
<div role="menu" aria-labelledby="dip">
<input type="checkbox" role="menuitemcheckbox" /><span aria-hidden="true">Ketchup</span><br />
<input type="checkbox" role="menuitemcheckbox" /><span aria-hidden="true">Mayonnaise</span>
</div>
This input element is not included in the accessibility tree because of its style attribute which sets display to none.
<input aria-label="firstname" style="display:none;" />
This input element is not included in the accessibility tree because of its aria-hidden attribute.
<input disabled aria-hidden="true" aria-label="firstname" />
This select element is not included in the accessibility tree because it is disabled and has a role attribute value of "none".
<select role="none" disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
</select>