Audit aria-input-field-name

Applicability

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.

Expectation

Each target element has an accessible name that is not empty ("").

Background

The list of roles in the applicability is derived by taking all the roles from WAI-ARIA Specifications that:

• have semantic roles that inherit from the input, menuitem or select role; and
• are form field controls (this notably excludes menu, 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.

Assumptions

There are no assumptions.

Accessibility Support

• Several assistive technologies have a functionality to list all form fields on a page, including the 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.
• Implementation of Presentational Roles Conflict Resolution varies from one browser or assistive technology to another. Depending on this, some elements can have one of the applicable semantic roles and fail this rule with some technology but users of other technologies would not experience any accessibility issue.

Bibliography

• Understanding Success Criterion 4.1.2: Name, Role, Value
• H91: Using HTML form controls and links
• H44: Using label elements to associate text labels with form controls
• H65: Using the title attribute to identify form controls when the label element cannot be used

Test Cases

Passed

Passed Example 1

This input element has an accessible name because of its programmatic label.

<label>
	first name
	<input />
</label>

Passed Example 2

This input element has an accessible name because of its aria-label attribute.

<div>last name</div>
<input aria-label="last name" disabled />

Passed Example 3

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>

Passed Example 4

This textarea element has an accessible name because of its aria-labelledby attribute.

<div id="country">Country</div>
<textarea aria-labelledby="country"></textarea>

Passed Example 5

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>

Passed Example 6

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>

Passed Example 7

This semantic checkbox element has the text content as its accessible name.

<div role="checkbox">I agree to the terms and conditions.</div>

Passed Example 8

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>

Failed

Failed Example 1

This input element does not have an attribute that gives an accessible name to it.

<div>last name</div>
<input />

Failed Example 2

This disabled input element does not have an attribute that gives an accessible name to it.

<input disabled />

Failed Example 3

This input element has an empty ("") accessible name because the space in the aria-label attribute value is trimmed.

<input aria-label=" " />

Failed Example 4

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>

Failed Example 5

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>

Failed Example 6

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>

Failed Example 7

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>

Failed Example 8

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>

Inapplicable

Inapplicable Example 1

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;" />

Inapplicable Example 2

This input element is not included in the accessibility tree because of its aria-hidden attribute.

<input disabled aria-hidden="true" aria-label="firstname" />

Inapplicable Example 3

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>