skip to content W3C SVG

Heading structure

Introduction

Headings play a vital role in the accessibility level of any document. They provide a clear structure of a document which benefits all users, making it easier to scan through the content, and are used for navigation by screen readers.

Heading levels help to create a hierarchy of page subsections. There are certain rules to creating a hierarchy (or ‘document outline’) that should not be broken:

  • Levels should not be skipped. A section introduced by an <h2> must use <h3> to introduce immediate subsections.
  • Each page should have a single <h1> which introduces the unique topic of the page.
  • Any element that acts as a heading visually or structurally should be denoted as a true heading in the markup (<h1> → <h6>).
  • Any element that does NOT act as a heading visually or structurally should not be marked as a heading.

WCAG criteria

Scope of the issue

Throughout C3, <span> elements are used in the place of native heading elements and styled, using classes, to act as headings visually. For example, on the main page:

<td align="center" class="title1">
    C3 Main Menu
</td>

Fixing the issue

  • Each page should have a singular <h1> at the start of the main content.
  • Each subsection should take a heading level that reflects its nesting level in the document.
  • Each element that is used as a heading should use the correct heading element (and the appropriate level) in the HTML markup.