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