Headings

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.

Live Examples

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

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.

source

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <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" />
  </head>
  <body>
    <h2 class="hero"1>Web accessibility</h21>
    <p>
      The <code>&lt;h1&gt;</code> heading is the most important one on the page
      and should not be skipped like it is above.
    </p>
    <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>
    <p>
      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.
    </p>

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

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

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

styles

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

.hero {
  font-size: 32px;
}