Developer Corner - Ordered Headings

09 Nov 2020 | Developer Corner

Helen Grimbly
  • Tweet this item
  • share this item on Linkedin

In Developer Corner this week Support Lead, Helen outlines the Accessibility considerations for use of different levels of headings.

G141 - Organizing a page using headings

One of the Web Content Accessibility Guideline (WCAG) requirements is for Headings to be ordered properly within an HTML web page. A <h1> should always appear before a <h2>, and <h2> before a <h3> and so on.

This requirement ensures that a user who is using a screen reader can read the web page in an ordered and structured manner, like you were reading a newspaper - first you would read the headings and then if you are interested you would read the content of those sections. If headings are not ordered in this manner it is more difficult to scan through a page to find the content you are looking for.

An example of proper structure:

<h1>How to get find us?<h1> 
<h2>By car</h2> 
<h2>By train</h2> 
<h3>On bank holidays</h3> 
<h2>By hot air balloon</h2>

Of course if the appearance of the various heading levels does not accord with the design intended for the page, this can be altered using style sheets.