Form field label is descriptive

  • Rule Typeatomic
  • Rule ID: cc0f0a
  • Last modified: Jul 19, 2019
  • Accessibility Requirements Mapping
    • 2.4.6 Headings and Labels (Level: AA)
      • Learn More about 2.4.6 (Headings and Labels)
      • Required for conformance to WCAG 2.0 and above on level AA and above
      • Outcome mapping:
        • Any failed outcomes: not satisfied
        • All passed outcomes: further testing is needed
        • An inapplicable outcome: further testing is needed
  • Input Aspects

Description

This rule checks that labels describe the purpose of form field elements.

Applicability

This rule applies to any HTML label element or other element referenced by aria-labelledby that:

  • is either visible or included in the accessibility tree, and
  • is programmatically associated with an HTML element that has one of the listed form field semantic roles: checkbox, combobox (select elements), listbox, menuitemcheckbox, menuitemradio, radio, searchbox, slider, spinbutton, switch and textbox.

Note: The list of form field roles is derived by taking all the ARIA 1.1 roles that:

  • have a semantic role that inherits from the abstract input or select role, and
  • does not have a required context role that itself inherits from one of those roles.
  • The option role is not part of the list of applicable roles, because it does not meet the definition of a User interface component. This means WCAG 2.1 does not require it to have an accessible name.

Note: This rule is a partial check for WCAG 2.1 success criterion 2.4.6, which applies to all labels. "Label" is used in its general sense and includes text or other components with a text alternative that is presented to a user to identify a component within Web content.

Expectation

Each target element describes the purpose of the associated form field element.

Note: Labels do not need to be lengthy. A word, or even a single character, may suffice.

Assumptions

There are currently no assumptions.

Accessibility Support

There are no major accessibility support issues known for this rule.

Background

Test Cases

Passed

Passed Example 1

Label that is coded with the label element and describes the purpose of the associated element.

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

Passed Example 2

Label that is coded with the p element and associated by the aria-labelledby attribute. The label describes the purpose of the associated element.

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

Passed Example 3

Implicit label that is coded with the label element and describes the purpose of the associated element.

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

Passed Example 4

Label is visible, but not included in accessibility tree

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

Passed Example 5

Label is included in accessibility tree, but not visible

<p id="label_fname" style="position: absolute; top: -9999px; left: -9999px;">
	First name:
</p>
<input aria-labelledby="label_fname" type="text" name="fname" />

Failed

Failed Example 1

Label that is coded with the label element and does not describe the purpose of the associated element.

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

Failed Example 2

Label that is coded with the p element and associated by the aria-labelledby attribute. The label does not describe the purpose of the associated element.

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

Failed Example 3

Implicit label that is coded with the label element and does not describe the purpose of the associated element.

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

Failed Example 4

Label is visible, but not included in accessibility tree, and does not describe the purpose of the associated element.

<p id="label_fname" aria-hidden="true">Menu</p>
<input aria-labelledby="label_fname" type="text" name="fname" />

Failed Example 5

Label is included in accessibility tree, but not visible, and does not describe the purpose of the associated element.

<p id="label_fname" style="position: absolute; top: -9999px; left: -9999px;">
	Menu
</p>
<input aria-labelledby="label_fname" type="text" name="fname" />

Inapplicable

Inapplicable Example 1

Label that is neither visible to users, nor included in the accessibility tree.

<div style="display:none">
	<label for="bad_label">Menu:</label>
	<input id="fname" type="text" name="bad_label" />
</div>

Inapplicable Example 2

Programatically associated p element that is neither visible nor included in the accessibility tree.

<div style="display:none">
	<p id="bad_label">menu</p>
	<input aria-labelledby="bad_label" type="text" name="fname" />
</div>

Inapplicable Example 3

The label element is associated with an HTML element that does not have a form field semantic role.

<label for="fname">First name</label>
<p id="fname">bob</p>

Inapplicable Example 4

The element with aria-labelledby is not a form field.

<i id="smile">Smile</i> <button aria-labelledby="smile">:-)</button>

Inapplicable Example 5

No label element.

<input id="fname" type="text" name="fname" />

Glossary

Included in the accessibility tree

key: included-in-the-accessibility-tree

Elements included in the accessibility tree of platform specific accessibility APIs. Elements in the accessibility tree are exposed to assistive technologies, allowing users to interact with the elements in a way that meet the requirements of the individual user.

The general rules for when elements are included in the accessibility tree are defined in the core accessibility API mappings. For native markup languages, such as HTML and SVG, additional rules for when elements are included in the accessibility tree can be found in the HTML accessibility API mappings (work in progress) and the SVG accessibility API mappings (work in progress).

Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted with using sequential keyboard navigation regardless of the assistive technologies used, even though the element would not be included in the accessibility tree.

Outcome

key: outcome

A conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:

  • Inapplicable: No part of the test subject matches the applicability
  • Passed: A test target meets all expectations
  • Failed: A test target does not meet all expectations

Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

Note: Implementers using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such "interim" results can be expressed with the incomplete outcome.

Semantic Role

key: semantic-role

A semantic role is a semantic association that indicates an object's type. This allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.

The semantic role of an element is its explicit semantic role if it has any, otherwise, the implicit semantic role is used.

Visible

key: visible

Content perceivable through sight.

Content is considered visible if making it fully transparent would result in a difference in the pixels rendered for any part of the document that is currently within the viewport or can be brought into the viewport via scrolling.

Content is defined in WCAG.


Changelog

Jul 19, 2019chore: run prettier (#688)
Jun 21, 2019fix: Make "manual" rules consistent with their SC (#586)
May 9, 2019Chore: Adapt site to ACT Rules CR format (#547)
May 7, 2019Template update - Form field label is descriptive (#505)
Apr 29, 2019chore: rename files and update associations (#489)
Apr 16, 2019chore: add unique id to all rules (#478)
Apr 15, 2019chore: WCAG ACT RULES CG Website Update (#437)
Mar 3, 2019fix: update rule type frontmatter (#427)
Oct 31, 2018Aligned Passed/Failed example 5 with heading rule
Oct 31, 2018Added missing "."
Oct 31, 2018Editorials + new test cases
Oct 31, 2018Minor update to applicability section
Oct 30, 2018Editorial updates
Oct 30, 2018Minor edits
Oct 30, 2018Bug fix
Oct 30, 2018Added test cases for implicit label
Oct 29, 2018Minor update
Oct 25, 2018Editorial update
Oct 24, 2018Draft test cases
Oct 24, 2018First draft

Useful Links


Implementations

Tool NameCreated ByReport

Acknowledgements