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

page-has-heading-one ignores headings visible only to screen readers #2056

Closed
sorin-davidoi opened this issue Feb 19, 2020 · 4 comments
Closed

page-has-heading-one ignores headings visible only to screen readers #2056

sorin-davidoi opened this issue Feb 19, 2020 · 4 comments
Assignees
@straker
Labels
fix Bug fixes rules Issue or false result from an axe-core rule

Comments

@sorin-davidoi
Copy link
Contributor

Expectation: page-has-heading-one correctly handles heading visible only to screen readers

Actual: page-has-heading-one ignores headings visible only to screen readers

Motivation: This is a regression introduced in 3.5.0

axe-core version: 3.5.1

Steps to reproduce:

Given (rendered at https://output.jsbin.com/zixewojela):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/css">
    .sr-only {
      border: 0; 
      clip: rect(0 0 0 0); 
      clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
      -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
      height: 1px; 
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <main>
    <h1 class="sr-only">H1</h1>
  </main>
</body>
</html>

axe https://output.jsbin.com/zixewojela --rules page-has-heading-one reports no violations with [email protected], but reports one violation with with 3.5.1:

  Violation of "page-has-heading-one" with 1 occurrences!
    Ensure that the page, or at least one of its frames contains a level-one heading. Correct invalid elements at:
     - html
    For details, see: https://dequeuniversity.com/rules/axe/3.5/page-has-heading-one
@danhumaan
Copy link

We are also running into this error in our testing and would love some clarity.

@straker
Copy link
Contributor

straker commented Feb 25, 2020

I believe this is caused by this fix to try to exclude hidden h1s from the check. Seems we didn't take into account visible only to screen readers.

@nbuonin nbuonin mentioned this issue Feb 26, 2020
Closed
@straker straker mentioned this issue Feb 26, 2020
Merged
2 tasks
@straker straker self-assigned this Feb 26, 2020
@straker straker added fix Bug fixes rules Issue or false result from an axe-core rule labels Feb 27, 2020
@padmavemulapati
Copy link

No page-has-heading-one voilation found on the given test page.
image
also tried with the pain test file with given source:
no voilations observed (even with page-has-heading-one
image
Verified with latest axe-coconut(4.4.1.07119)

@straker
Copy link
Contributor

straker commented Apr 1, 2020

No docs needed

@straker straker closed this as completed Apr 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@straker straker

Labels
fix Bug fixes rules Issue or false result from an axe-core rule
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@sorin-davidoi @straker @danhumaan @padmavemulapati