SC2-5-3-label-content-name-mismatch

[annethyme]

---

name: label and name from content mismatch
description: |
Interactive elements labelled through their content must have their visible label as part of their accessible name

success_criterion:

• 2.5.3 # Label in Name

test_aspects:

• DOM Tree
• CSS Styling

authors:

• Anne Thyme Nørregaard
• Bryn Anderson
• Jey Nandakumar
• Wilco Fiers

---

Test procedure

Applicability

This rule applies to any element that has:

• a widget role that supports name from content, and
• visible text content, and
• an aria-label or aria-labelledby attribute.

Note: At time of writing this rule, the widget roles that supports name from content are: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, tab, treeitem.

Expectation 1

The complete visible text content of the target element either matches or is contained within it's accessible name. Leading and trailing whitespace and difference in case sensitivity should be ignored.

Assumptions

There are currently no assumptions

Accessibility Support

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

Background

• https://www.w3.org/TR/WCAG21/#label-in-name

Test cases

Passed

<!-- Visible label and accessible name matches when trailing white spaces are removed -->
<div role="link" aria-label="next page ">next page</div>

<!-- Character insensitivity between visible label and accessible name -->
<div role="link" aria-label="Next Page">next page</div>

<!-- Full visible label is contained in the accessible name -->
<button name="link" aria-label="Next Page in the list">Next Page</div>

Failed

<!-- Visible label doesn't match accessible name -->
<div role="link" aria-label="OK">Next</a>

<!-- Not all of visible label is included in accessible name -->
<button name="link" aria-label="the full">The full label</div>

Inapplicable

<!-- Not a widget role -->
<a aria-label="OK">Next</a>

<!-- Widget role that does not support name from content -->
<input type="email" aria-label="E-mail">Contact</input>

<!-- Non-widget role that supports name from content -->
<div role="tooltip" aria-label="OK">Next</a>

<!-- No rendered text in name from content -->
<div role="tooltip" aria-label="OK"></a>

<!-- Non-text content -->
<button aria-label="close">X</button>

[WilcoFiers]

Applicability

Elements that has one of the following [semantic roles][], that has both text content that is [visible on the page][], as well as having an aria-label or aria-labelledby attribute.

The applicable roles are: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, tab, textbox, treeitem

[WilcoFiers]

This should pass:

<button aria-label="close">X</button>

[kasperisager]

What's the common denominator for the applicable roles? This piece of information is pretty important and is currently left out of the rule.

Case in point: If all of the original rule authors decide to leave the group tomorrow never to be heard from again, future maintainers will have no clue how that list of roles came about and what to do about it when the specs are updated.

[annethyme]

"Applicability" updated so that it is definition based instead of example based.

Old Applicability

Any element that has one of the following [semantic roles][], that has text content that is [visible on the page][], as well as having an aria-label or aria-labelledby attribute.

The applicable roles are: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, tab, textbox, treeitem.

New Applicability

Any element that has a widget role that supports name from content and has [rendered text content][] as well as an aria-label or aria-labelledby attribute.

Note: At time of writing this rule, the applicable roles are: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, tab, textbox, treeitem.

[annethyme]

Should these be a pass or a fail?

<!-- Numbers and numerals -->
<a href="#" aria-label="Two">2</a>

<!-- Numerals used instead of similarly sounding words in either name from content or accessible name -->
<a href="#" aria-label="Got to be">Got 2 be</a>

<!-- Letter used as something it looks like -->
<a href="#" aria-label="Close">X</a>

[annethyme]

textbox removed from list of applicable roles, since it doesn't support name from content.

[annethyme]

Should these be pass or fail?

<!-- Accessible name is one term split over two words, name from content is only the first word -->
<a href="#" aria-label="Home page">Home</a>

<!-- Accessible name is one term that could have been written as two words, name from content is only the first word -->
<a href="#" aria-label="Homepage">Home</a>

<!-- Name from content split out in accessible name -->
<a href="#" aria-label="Next wonderful article">Next article</a>

[Brynanders]

What happens when the rendered text content is represented in multiple element labels?

<a href="#" aria-label="card a">Card</a>
<a href="#" aria-label="card b">Card</a>
<a href="#" aria-label="card c">Card</a>