In a book the title of the book is the main heading and the name of each chapter is the main heading of that page. The headings in the chapter are the sub headings. It is possible that the sub headings can also have sub headings of next level.
Say the demographics of India if taken as a book’s title,
India – Level 1 (main heading).
Each state i.e. Andhra Pradesh, Arunachal Pradesh, Assam etc are next level headings – Level 2 heading (sub heading of India)
Each district under the states i.e. Ananthapur, Cadapa etc – next level of states (sub headings of states).
Developers tend to style each heading with a different font size, color, style etc. The levels of each heading is identified with the size visually. This differences are not identified by screen readers.
HTML headings
The HTML markup allows headings from level 1 to level 6 (h1 to h6). H1 being the highest level and marked for the main heading and the sub headings are level 2 and level 3 are the sub headings of level 2. By default a specific font size is assigned to these headings. Developers can overwrite the the default font size.
<h1>India</h1>
<h2>Andhra Pradesh</h2>
<h3>Anantapur </h3>
<h3>Cadapa </h3>
<h2>Arunachal Pradesh</h2>
ARIA way
If for some reason developers are not able to use the HTML headings, the alternate is with ARIA. Remember that the use of HTML headings should be the first priority.
The role heading can be used on any non scemantic element such as <div>, <p> or <span> so that the content it holds will be read as a heading when accessed through a screen reader. To provide a hierarchy the levels of headings should be provided. Aria-level property along with the role heading will complete the process.
<div role=‘heading’ aria-level=‘1’>India</div> – Reads as ‘Heading level 1 India’ by the screen reader.
Points to remember
- Each web page should have at least one and not more than 2 level one headings.
- The heading structure must be hierarchical in order.
- Though not advisable one level of heading can be skipped i.e. After h1 the sub heading can be h3.
- The reverse hierarchy is a bad practice. i.e. The sub heading of h2 can never be h1.
- Do not consider the entire page for hierarchy, often the header part of the page will have one hierarchical structure if it has sections, similarly the main content portion of the page has a different hierarchy and the footer will have a different one.