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.5

Referring UWEM Test

3.5_HTML_03

This 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.

    Bad example:
    <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>
    Good example:
    <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>