Skip to content
GitLab
Closed
Created by Koen Cornelis@Badlapje

heading-level incorrectly flags html as invalid

Provide a broad description of the bug.

Reduced test-case

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Testcase for heading-level</title>
 </head>
 <body>
     <nav><h2 class="visually-hidden">Main navigation</h2></nav>
     <main><h1>The page title</h1></main>
 </body>
 </html>

Configuration

No special config needed

Expected result

It should pass. There is no rule in WCAG requiring the h2's to come sequentially behind the h1 on the page. Given the vast possible array of designs, it'll often occur that the h1 is not the first item on the page. I would however expect that any headers below h1/h2 are sequential.

Actual result

Console was cleared
cypress_runner.js:178635 Command:   heading-level
cypress_runner.js:178635 Ruleid:    heading-level
cypress_runner.js:178635 Ruleurl:   https://html-validate.org/rules/heading-level.html
cypress_runner.js:178635 Severity:  2
cypress_runner.js:178635 Message:   Initial heading level must be <h1> but got <h2>
cypress_runner.js:178635 Offset:    3294
cypress_runner.js:178635 Line:      20
cypress_runner.js:178635 Column:    6
cypress_runner.js:178635 Size:      2
cypress_runner.js:178635 Selector:  html > body > div > div > nav > h2
cypress_runner.js:178635 Element:   <h2 class=​"visually-hidden" id=​"main-nav-label">​Main navigation​</h2>​

Version

  • html-validate: 5.4.0
  • cypress-html-validate: 2.0.2
  • cypress: 8.3.0
Edited by Koen Cornelis