Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WCAG SC 2.5.3 failures not identified by axe DevTools #4381

Open
1 task done
andrefcdias opened this issue Mar 25, 2024 · 3 comments
Open
1 task done

WCAG SC 2.5.3 failures not identified by axe DevTools #4381

andrefcdias opened this issue Mar 25, 2024 · 3 comments
Labels
docs Documentation changes
Milestone
Axe-core 4.10

Comments

@andrefcdias
Copy link

Product

axe Extension

Product Version

Extension: v4.77.1 axe-core: v4.8.4

Latest Version

  • I have tested the issue with the latest version of the product

Issue Description

I was testing some content for WCAG 2.1 SC 2.5.3 and noticed that my example wasn't being flagged by axe DevTools. To confirm the issue, I created a page to test this in a CodeSandbox using all the Fail examples for the rule. I ran the extension on the example page and got 0 issues, except for 2 issues caused by the CodeSandbox injected button.
To make sure the button wasn't the cause, I created a page locally to test it and got the same result, no issues with the page.

Expectation

label-content-name-mismatch rule fails on 3 separate elements

Actual

0 issues found

How to Reproduce

  1. Open CodeSandbox example page or use the code shared below to test locally
  2. Run axe DevTools full page scan
  3. Observe 0 issues found

For future context, in case the CodeSandbox gets deleted, here is the used code:

Sample page that should produce WCAG 2.5.3 failures 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>WCAG SC 2.5.3 test</title>
  </head>
  <body>
    <main>
      <h1>Examples of failures for WCAG SC 2.5.3 Label in Name</h1>

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

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

      <button type="button" aria-label="definitely not WCAG 2.5.3 compliant">
        mysterious button
      </button>
    </main>
  </body>
</html>

Additional context

Below are 2 screenshots, with alt text, of the 0 issues in axe DevTools and a successful failure identification by a different accessibility checker:

A page with the sample code provided is rendered and on the side, the axe DevTools extension is shown, with 0 total errors and the message "You have (0) automatic issues, nice!".

A page with the sample code provided is rendered and on the side, the IBM Equal Access Accessibility Checker is shown, with 3 errors with the message "Accessible name does not match or contain the visible label text". The first one is highlighted and there is a focus indicator on the page on the first rendered button.
@andrefcdias andrefcdias added the ungroomed Ticket needs a maintainer to prioritize and label label Mar 25, 2024
@github-actions github-actions bot added the extension Axe Firefox or Chrome extension issues label Mar 25, 2024
@straker
Copy link
Contributor

straker commented Mar 25, 2024

Thanks for the issue. So the label-content-name-mismatch rule is an experimental rule, which the extension does not run by default. If you're a Pro user you can enable the experimental rules in the settings and then you should be able to see the results back. Running the example with experimental rules turned on, I see 3 violations returned.

@straker
Copy link
Contributor

straker commented Mar 25, 2024

I can see from the docs that we claim it's enabled in the browser extension, but this is both correct and incorrect. It was enabled in the axe coconut extension (when that was still a thing), but it is not enabled in the devtools extension. We'll update the docs to make that more clear.

@straker straker added docs Documentation changes and removed extension Axe Firefox or Chrome extension issues ungroomed Ticket needs a maintainer to prioritize and label labels Mar 25, 2024
@andrefcdias
Copy link
Author

Thank you @straker! That makes much more sense now.

@straker straker added this to the Axe-core 4.10 milestone Apr 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
docs Documentation changes
Projects
None yet
Milestone
Axe-core 4.10
Development

No branches or pull requests
2 participants
@straker @andrefcdias