Headings

Screen readers announce headings created through the use of HTML codes (<h1> for heading 1, <h2> for heading 2s, and so on) for easy navigation by users.

Headings should have a meaningful hierarchy and be used sequentially, similar to outlines.

  • Heading level 1 <h1></h1>
    • Heading level 2 <h2></h2>
      • Heading level 3 <h3></h3>
      • Heading level 3 <h3></h3>
    • Heading level 2 <h2></h2>
      • Heading level 3 <h3></h3>
        • Heading level 4 <h4></h4>
        • Heading level 4 <h4></h4>
      • Heading level 3 <h3></h3>
    • Heading level 2 <h2></h2>

Doing it in Cascade

Cascade templates provide an automatic Heading 1 <h1></h1> as the page title and an automatic Heading 2 <h2></h2> as the footer. In the CMS environment allows you select paragraph styles to denote Heading structure.

How to verify

The simplest way to verify is to browse your site on staging with a browser that has the WAVE Toolbar installed. Running the "Errors, Features, and Alerts" report will show you where problems exist.

If you cannot install the WAVE Toolbar in your browser, try using the WAVE online web accessibility checker tool instead.