Skip to content

form-field-non-empty-accessible-name-e086e5.md

Latest commit

 

History

History
executable file
·
267 lines (189 loc) · 9.03 KB

form-field-non-empty-accessible-name-e086e5.md

File metadata and controls

executable file
·
267 lines (189 loc) · 9.03 KB
id e086e5
name Form field has non-empty accessible name
rule_type atomic
description This rule checks that each form field element has a non-empty accessible name.
accessibility_requirements
wcag20:4.1.2
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
input_aspects
Accessibility Tree
CSS styling
DOM Tree
acknowledgments
authors funding
Anne Thyme Nørregaard
Bryn Anderson
WAI-Tools

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 ("").

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.
  • aria-busy exists but, currently, is not widely supported, so the rule ignores it.

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.

Bibliography

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>