Skip to content

form-field-label-descriptive-cc0f0a.md

Latest commit

 

History

History
executable file
·
276 lines (210 loc) · 10 KB

form-field-label-descriptive-cc0f0a.md

File metadata and controls

executable file
·
276 lines (210 loc) · 10 KB
id cc0f0a
name Form field label is descriptive
rule_type atomic
description This rule checks that labels describe the purpose of form field elements.
accessibility_requirements
wcag20:2.4.6 wcag-technique:G131
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
forConformance failed passed inapplicable
false
not satisfied
further testing needed
further testing needed
input_aspects
Accessibility Tree
DOM Tree
CSS Styling
Language
acknowledgments
authors previous_authors funding
Jean-Yves Moyen
Wilco Fiers
Dagfinn Rømen
Geir Sindre Fossøy
WAI-Tools

Applicability

This rule applies to any programmatic label of an element which has one of the following semantic roles:

  • checkbox
  • combobox
  • listbox
  • menuitemcheckbox
  • menuitemradio
  • radio
  • searchbox
  • slider
  • spinbutton
  • switch
  • textbox

and where both the element and the programmatic label are visible.

Expectation

Each test target, together with its visual context, describes the purpose of the associated element.

Assumptions

Accessibility Support

  • 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 applicable semantic roles is derived by taking all the ARIA 1.2 roles that:

  • inherit from the input, menuitem or select role, and
  • are form field controls (this notably excludes menu, option or tree).

Labels in WCAG are not restricted to the label element of HTML and can be any element. This rule is only concerned about actual label elements, and elements that are programmatically marked as labels via the aria-labelledby attribute.

It is possible for an element to have an accessible name but still have a non-descriptive label element (and even a non-descriptive label). In that case, it would pass Success Criterion 4.1.2: Name, Role and Value but still fail this rule and Success Criterion 2.4.6: Headings and Labels.

Having a label which is not included in the accessible name is a violation of Success Criterion 2.5.3: Label in Name but not of this rule nor of Success Criterion 2.4.6: Headings and Labels.

Bibliography

Test Cases

Passed

Passed Example 1

The label element is a programmatic label of the input element and describes it.

<html lang="en">
	<label>First name:<input id="fname" type="text" name="fname"/></label>
</html>

Passed Example 2

The label element is a programmatic label of the input element and describes it.

<html lang="en">
	<label for="fname">First name:</label>
	<input id="fname" type="text" name="fname" />
</html>

Passed Example 3

The p element is a programmatic label of the input element and describes it.

<html lang="en">
	<p id="label_fname">First name:</p>
	<input aria-labelledby="label_fname" type="text" name="fname" />
</html>

Passed Example 4

The p element is a programmatic label of the input element and describes it. The programmatic label does not need to be included in the accessibility tree for this rule to apply.

<html lang="en">
	<p id="label_fname" aria-hidden="true">First name:</p>
	<input aria-labelledby="label_fname" type="text" name="fname" />
</html>

Passed Example 5

The label elements are programmatic labels of their respective input elements. The label elements, are not descriptive enough (because they are repeated over several fields). However, the headings provide a visual context that differentiates the purpose of the otherwise identically named form fields. Within their visual context, the label elements are descriptive of their respective input elements.

<html lang="en">
	<h2>Shipping</h2>
	<label>Name<input id="shipping-name" type="text" name="name"/></label>
	<label>Street<input id="shipping-street" type="text" name="street"/></label>

	<h2>Billing</h2>
	<label>Name<input id="billing-name" type="text" name="name"/></label>
	<label>Street<input id="billing-street" type="text" name="street"/></label>
</html>

Passed Example 6

Both the div and the span elements are programmatic labels of the input element. Each of them, within the visual context formed by the other one, is descriptive.

<html lang="en">
	<div id="shipping">Shipping</div>
	<span id="name">Name</span>
	<input id="shipping-name" type="text" name="name" aria-labelledby="shipping name" />
</html>

Failed

Failed Example 1

The label element is a programmatic label of the input element but does not describe it.

<html lang="en">
	<label>Menu<input id="fname" type="text" name="fname"/></label>
</html>

Failed Example 2

The label element is a programmatic label of the input element but does not describe it.

<html lang="en">
	<label for="fname">Menu</label>
	<input id="fname" type="text" name="fname" />
</html>

Failed Example 3

The span element is a programmatic label of the input element but does not describe it.

<html lang="en">
	<p id="label_fname">Menu</p>
	<input aria-labelledby="label_fname" type="text" name="fname" />
</html>

Failed Example 4

These label elements are programmatic labels of their respective input elements. They are not descriptive enough because they are reused on multiple fields. The headings are not visible. Therefore, they do not provide visual context.

<html lang="en">
	<fieldset>
		<h2 style="position: absolute; top: -9999px; left: -9999px;">Shipping address</h2>
		<label>Name: <input type="text" name="shipping-name"/></label>
		<label>Street: <input type="text" name="shipping-street"/></label>
	</fieldset>
	<fieldset>
		<h2 style="position: absolute; top: -9999px; left: -9999px;">Billing address</h2>
		<label>Name: <input type="text" name="billing-name"/></label>
		<label>Street: <input type="text" name="billing-street"/></label>
	</fieldset>
</html>

Failed Example 5

These button and span elements are both programmatic labels of the input element, but only the button is visible. It has no visual context, and is not descriptive.

<html lang="en">
	<span id="search" style="display: none">Search</span>
	<input type="text" name="search" aria-labelledby="submit search" />
	<button id="submit">Go</button>
</html>

Inapplicable

Inapplicable Example 1

The label element is not a programmatic label of any element.

<html lang="en">
	<label for="fname">First name:</label>
	<p id="fname"></p>
</html>

Inapplicable Example 2

The label element is not visible.

<html lang="en">
	<label for="fname" style="position: absolute; left: -9999px;">First name:</label>
	<label aria-hidden="true">First name:</label>
	<input id="fname" type="text" name="fname" />
</html>

Inapplicable Example 3

The label is a visible programmatic label of the input element. However, the input is not visible, hence this rule does not apply.

<html lang="en">
	<label>First name: <input style="position: absolute; top: -9999px; left: -9999px;" disabled role="none"/></label>
</html>