Rules

  1. Headings must describe the topic or purpose
  2. If text serves as a heading visually and structurally, it must be marked as a heading

Best Practices

  1. A page should contain an h1
  2. Heading levels cannot be skipped
  3. An h2 cannot precede an h1
  4. Similar heading levels should have a consistent visual appearance

Why are headings important?

Headings help screen reader users bypass blocks of content, identify page structure and important information.

How to annotate headings

  1. Locate all the headings within the page
  2. Provide an appropriate heading level for each heading

Desktop - 1.png

How to code headings

Using HTML

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h4>

<h6>Heading level 6</h6>

Using ARIA

<div role="heading" aria-level="1">Heading Level 1</div>