SIA-R14Visible labels are included in accessible names

Accessibility requirements

This rule tests conformance of the following accessibility requirements:

• 2.5.3 Label in Name

Description

This rule checks that widgets that can be labeled through their content also have their visible label included in their accessible name.

Applicability

This rule applies to every element in the HTML namespace where the element has

• a semantic role that is widget and supports name from content (namely: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, tab, or treeitem); and
• visible inner text that is textual content; and
• either an aria-label or an aria-labelledby attribute.

Expectations

1. The visible inner text of the element either matches or is included in the accessible name of the element.

Assumptions

This rule makes no assumptions.

Accessibility support

This rule has no known accessibility support concerns.

Examples

Passed

This link has textual content and an accessible name that match:

<div role="link" aria-label="next page ">Next page</div>

This button has textual content which is included in its accessible name:

<button name="link" aria-label="Next Page in the list">Next Page</button>

Failed

This link has mismatching textual content and accessible name:

<div role="link" aria-label="Consent">I agree</div>

The textual content of this button is not included in its accessible name:

<button name="link" aria-label="Next Page">Next Page in the list</button>

Inapplicable

The input role does not support name from content and so this element is inapplicable:

<input type="email" aria-label="E-mail" value="Contact" />

This link has no textual content:

<div role="link" aria-label="OK"></div>

Acknowledgments

This document includes material copied from or derived from https://www.w3.org/WAI/standards-guidelines/act/rules/2ee8b8/. Copyright © 2024 W3C® (MIT, ERCIM, Keio, Beihang).