A text to voice screen reader is a piece of assistive technology that talks to the user. It can navigate using numerous elements such as headings, links, buttons, alt tags, html tags and aria rules. You can see screen readers in action here >>>>>>

What

Headings are used to structure and organise content on a web page and documents like this one. They are like signposts, guiding the users through the content. Headings if you imagine, correctly used act like stepping stones across a pond.

Headings are defined using the following html tags <h1> <h2> <h3> <h4> <h5> <h6> tags, where <h1> represents the most important heading and <h6> represents the least important heading. Headers talk back the heading element as an announcement so “heading level 1”.

A screen reader can also inform the user as to how many headings are present on the page.

Why

Headings provide a clear hierarchy of information and help the screen reader user to quickly build a picture of the content, speeding up the navigation.

How

Here is an example of how to use HTML to create the headings:

<h1>Main Heading</h1>

<h2>Secondary Heading</h2>

<h3>Subheading</h3>

<h4>Sub-subheading</h4>

<h5>Sub-sub-subheading</h5>
<h6>Least Important Heading</h6>

This code will create the following hierarchy of headings:

Main Heading

Secondary Heading

Subheading

Sub-subheading

Sub-sub-subheading
Least Important Heading


It is important to use headings correctly in order to maximize their benefits.

Here are some tips for using HTML headings

  • Use headings sparingly

Only use headings for the most important sections of your content.

  • Use the correct heading level
  • Use <h1> for the main heading, <h2> for secondary headings, and so on.
  • Think about a book, The title would be a heading 1 and a chapter a heading 2 and so on.

Use descriptive headings

The heading should accurately reflect the content of the section. This helps users understanding what the section might be about. This also help search engines better crawl a website.

Use consistent heading styles

Use the same style for all headings of the same level.

Making websites accessible one website at a time.