IBMa / equal-access

IBM Equal Access Accessibility Checker contains tools to automate accessibility checking from a browser or in a continuous development/build environment
https://www.ibm.com/able/toolkit/tools#develop
Apache License 2.0
635 stars 82 forks source link

2.5.3 Label in Name triggers when it is not an error #203

Closed masi closed 4 years ago

masi commented 4 years ago

The checker complains that the accessible name doesn't match the visible link text.

In a list of items the visible link text is simply "details", so the accessible name is set to the items title.

Please consider filing the found links in the "needs review" section.

tombrunet commented 4 years ago

Please provide a code example.

tombrunet commented 4 years ago

@masi We have encountered a lot of cases where requests for rule changes have been due to a misunderstanding of the requirements. Without a code example that reproduces the error, we can't assess whether or not this is really a problem. So far, the rule has been triggering correctly.

masi commented 4 years ago
<div>
    <h3>Wien</h3>
    <p>Lorem Ipsum</p>
    <div>
        <a aria-label="Filiale Wien" href="/kontakt/filialen/wien">Details</a>
    </div>
</div>

There is more than one such item. To avoid having all of them been labelled "Details" the accessible name is different.

BTW, there is another issue on the same page where the sample is from. The site has no real logo and the domain name acts also as true name of the site. As usual the logo links to start page. I also choose deliberately a different accessible name:

<a href="/" aria-label="Startseite">foobar.at</a>

This code also triggers the rule.

I'm not a seasoned a11y expert and only happy to learn how I can improve my code.

cpandhi commented 4 years ago

@masi Users typically have a much better experience if the words and characters in the visible label of a control match or are contained within the accessible name. Mismatches between visible labels and programmatic names for controls are more of an issue for speech-input and text-to-speech users who also have cognitive challenges. heres some explantion that will help you understand the new WCAG 2.1 requirement to have label (what is visible) in name (programmatic name) So in the example above, you could avoid the error by slightly modifying the aria label as aria-label="Details about Filiale Wien"

tombrunet commented 4 years ago

@masi The WCAG 2.1 requirement was created for users of automated speech recognition systems. If the visible text is not inside of the label, if they speak a command referencing the visible text, the automated speech reco system won't find it since the aria-label overrides any visible label. This is definitely a violation of the WCAG 2.1 checkpoint and should not be changed to 'needs review'.

masi commented 4 years ago

Thank you for reminding me of speech recognition systems.