A11Y Solutions
Provides auto-suggestions when entering text


    Proper use of headings is a vital part of providing overall document structure and aid in navigating to specific sections of the page.

    The Problem

    Particularly for screen reader users, improper or non-existent use of headings can make page scanning and navigation more difficult.

    The Solution

    Use appropriate headings from H1 thru H6 to help define the page outline and make it easier to scan and navigate.

    Related Articles

    Live Examples

    Before illustrates the problem, After illustrates the solution. Click the header to see it larger in a modal.

    Please note that this Before example contains inaccessible code, use this link to skip to the After Live Example



    Code Comparison

    Code diff between the before and after examples above to show the changes necessary. To copy the final source click on the 'after' path link before the diff.


    Comparing /examples/navigation/headings/before/index.html to /examples/navigation/headings/after/index.html

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Accessibility Solutions - Navigation - Headings</title>
    <link rel="stylesheet" href="../../../presentation.css" />
    <link rel="stylesheet" href="headings.css" />
    2 class="hero"1>Web accessibility</h21>
    The <code>&lt;h1&gt;</code> heading is the most important one on the page
    and should not be skipped like it is above.
    <h2>Assistive technologies used for web browsing</h2>
    <p>Molestias deserunt labore nulla est porro eos veritatis dicta.</p>
    <h2>Guidelines on accessible web design</h2>
    <h3>Web Content Accessibility Guidelines</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

    p><strongh4>2.1.1 Criticism of WAI guidelines</strong></ph4>
    Applying a bold treatment like the heading above instead of using an
    appropriate H* tag is a missed opportunity to strengthen the page outline
    and semantics.

    <h2>Essential components of web accessibility</h2>
    <p>Voluptates rerum, dignissimos omnis nesciunt error.</p>

    43>Guidelines for different components</h43>
    Avoid skipping headings on the page, this may cause confusion for screen
    reader users that are relying on the headings outline to navigate the

    <script src="headings.js"></script>


    Comparing /examples/navigation/headings/before/headings.css to /examples/navigation/headings/after/headings.css

    .hero {
    font-size: 32px;