Label and name from content mismatch

  • Rule Typeatomic
  • Rule ID: 2ee8b8
  • Last modified: Aug 21, 2019
  • Accessibility Requirements Mapping
    • 2.5.3 Label in Name (Level: A)
      • Learn More about 2.5.3 (Label in Name)
      • Required for conformance to WCAG 2.1 and above on level A 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 interactive elements labelled through their content have their visible label as part of their accessible name.

Applicability

This rule applies to any element that has:

Note: widget roles that supports name from content are: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, tab, treeitem.

Expectation

The complete visible text content of the target element either matches or is contained within its accessible name.

Note: 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

Test Cases

Passed

Passed Example 1

Visible label and accessible name matches when trailing white spaces are removed.

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

Passed Example 2

Character insensitivity between visible label and accessible name.

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

Passed Example 3

Full visible label is contained in the accessible name.

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

Failed

Failed Example 1

Visible label doesn't match accessible name.

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

Failed Example 2

Not all of visible label is included in accessible name.

<button name="link" aria-label="the full">The full label</button>

Inapplicable

Inapplicable Example 1

Not a widget role.

<a aria-label="OK">Next</a>

Inapplicable Example 2

Widget role that does not support name from content.

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

Inapplicable Example 3

Non-widget role that supports name from content.

<div role="tooltip" aria-label="OK">Next</div>

Inapplicable Example 4

No rendered text in name from content.

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

Inapplicable Example 5

Non-text content.

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

Glossary

Accessible Name

key: accessible-name

The programmatically determined name of a user interface element that is included in the accessibility tree.

The accessible name is calculated using the accessible name and description computation.

For native markup languages, such as HTML and SVG, additional information on how to calculate the accessible name can be found in HTML Accessibility API Mappings 1.0, Accessible Name and Description Computation (work in progress) and SVG Accessibility API Mappings, Name and Description (work in progress).

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 Text Content

key: visible-text-content

Elements that are visible, that are of type text, excluding text content in title or alt attributes, and are not categorised as non text content.

Note: These elements should also be ensured to meet the color contrast and visibility requirements.


Changelog

Aug 21, 2019fix: update links to WCAG21 resources (#776)
Aug 21, 2019Editorial changes (#725)
Jul 26, 2019Editorial changes (#702)
Jul 2, 2019chore: Correct various typos (#640)
May 9, 2019Chore: Adapt site to ACT Rules CR format (#547)
May 7, 2019Template update - label and name from content mismatch (#519)
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)
Oct 30, 2018Update definition of "accessible name" (#254)
Oct 9, 2018Fix: testcase generation (#296)
Sep 26, 2018fix: test cases code snippets
Sep 25, 2018fix: testcase code snippet
Aug 30, 2018Chore: Update test cases format and descriptions (#230)
Aug 8, 2018Rule: SC2-5-3-label-content-name-mismatch
Jun 24, 2018DRAFT: SC2-5-3-label-content-name-mismatch.md (#146)

Useful Links


Implementations

Tool NameCreated ByReport
AlfaSiteimproveView Report

Acknowledgements