Check a Page
Heading levels
(Referring UWEM Test: 3.5_HTML_03)Test info
Failure cause
Found a skipped heading-level
The inspected heading element skips one or more levels in the structure (for example, for h3 the preceding heading element is h1).
Why this may be a barrier
Header elements should only be used to convey document structure: for example use h2 to indicate a subsection of h1. Skipping heading-elements or using heading-elements for font-formatting lead to confusion concerning the content-structure.
Good Example
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>Sample: Page with CORRECT HEADING STRUCTURE</title></head>
<body><h1>Correct main heading</h1><h2>Correct subsection level 2</h2><h3> Correct subsection level 3</h3><h4> Correct subsection level 4</h4><h4> Correct subsection level 4</h4><h2>Correct subsection level 2</h2><h3> Correct subsection level 3</h3></body>
</html>
Solution
Insert the missing heading-levels or restructure the content so that no levels are skipped.
References
Related WCAG 1.0 Checkpoint
3.5"Use header elements to convey document structure and use them according to specification." [Priority 2]
WCAG 1.0 Checkpoint 3.5Referring UWEM Test
3.5_HTML_03This test is targeted to check that no levels are skipped in the heading hierarchy.
Examples
-
Skipped heading levels
Skipped heading levels may be confusing for navigating the page.
If a heading level is skipped, adjust the levels of the nested headings appropriately.
<body><h1>Introduction to Web Accessibility</h1><h2>Why Web Accessibility is Important</h2><h4>How People with Disabilities Use the Web</h4><p>In this example the 3rd heading-level has been skipped, which may lead to confusion, because the formal structure of the content is not clear.</p></body>
<body><h1>Introduction to Web Accessibility</h1><h2>Why Web Accessibility is Important</h2><h3>How People with Disabilities Use the Web</h3><p>In this example the content is structured clearly with headings in the right order.</p></body>
