Headings matter
Heading is an extremely important element for screen reader users. Each screen reader allows you to jump from heading to heading on a webpage, making it easier and quicker to find specific content. Imagine that instead of scanning the page for the content you need, you must read it line by line, including all the elements: navigation links, search options, ads, graphics, etc. This is what a blind user experiences on a page which does not use headings and other HTML elements that clarify page structure. When a page has headings, the user may directly move the focus to the heading and start reading from there, or go to another heading to see what the rest of the page is about. You can learn more about the heading element from our video.
A frequent issue
In this article, I will discuss one relatively common issue that occurs even on pages that otherwise have a good heading structure. Consider the following examples:
Example 1
<H1>Our Management</H1>
<H2>William Shakespeare</H2>
<H3>CEO</H3>
<H4>United Kingdom</H4>
<P>Born in Stratford. Started his career […].</P>
<H2>Emily Dickinson</H2>
<H3>Long-term flat rentals manager</H3>
<H4>United States</H4>
<P>Born in Amherst. Started her career […].</P>
Example 2
<H1>Events</H1>
<H2>Sea of Love</H2>
<H3>14 February 2021</H3>
<H4>Sargasso Sea</H4>
<P>Annual eel spawning. The event is eel only and adult only.</P>
What is wrong?
In both examples, the issue is the same. The first heading (H1) and the second heading (H2) are used correctly, but the headings that follow them are used for formatting purposes and do not reflect the content structure. From a structural point of view, the manager name, role and place of work are one piece of content. The same can be said about the event name, date and location in the second example. To know if you want to read the details of William Shakespeare’s or Emily Dickinson’s career, you need to read all the headings. The same refers to “Sea of Love”. The person’s name, role and place of work are equally important. Needless to say, event name, date and location in the second example are equally crucial to the reader as well. A sighted person can easily read the whole piece of information. However, this is not the case for a blind reader. As I mentioned, blind persons use navigation by headings to quickly move along the content. It is thanks to a well-written heading that a blind person knows what the content below the heading is about.
Navigation by headings
Technically, navigation by headings provided by screen readers can be performed in two ways:
- A user navigates between headings using a hotkey or a gesture; or
- A user performs a screen reader command which lists all headings on the page.
In both cases, the screen reader reads the heading text, but (and this is also important) it does not automatically read the content below the heading.
Issue details
Now let’s see what the blind user will hear in the case of our examples.
On the “Our management” page, when the user presses “h” (a hotkey in Windows screen readers), they will hear “Our Management” + info about the heading level. This is correct and helpful. When the user presses “h” again, the screen reader will say “William Shakespeare”, and this information is not sufficient. If the user is looking for the name of the long-term flat rentals manager or is just interested in what management roles exist in the company, hearing just a name is not helpful. When the user presses “h” again, they will hear “CEO”. This info might be helpful if the blind user knew that “CEO” refers to William Shakespeare, but it is not so obvious if you cannot see the screen. Descending heading levels might be a hint, but at the same time, because “CEO” is a separate heading and headings should start new content, the user will not immediately guess that CEO is the current position of William Shakespeare. The next heading, “United Kingdom”, does not make the situation clearer, but at that moment the user will probably understand that headings are used incorrectly, and they will start reading the content manually so as not to miss anything. In the “Events” example, the situation is the same: name, date and location will be treated as separate items. One may assume the issue is not a big deal, but, believe me, it does take some time to understand what is going on.
How should the issue be fixed?
In both examples, the content split between three headings should be tagged as one heading. Note that it does not mean that each section of information must look the same. You can still use DIV element + CSS to make particular parts look different.
Example
<H1>Events</H1>
<H2>
<DIV CLASS=”event_name”>Sea of Love
<DIV CLASS=”event_date”>14 February 2021</DIV>
<DIV CLASS=”event_place”>Sargasso Sea</DIV>
</H2>
<P>Annual eel spawning. The event is eel only and adult only.</P>
Now when the user navigates to the heading level 2 on the page by pressing “h”, they will hear “Sea of Love 14 February 2021 Sargasso Sea heading level 2” or a very similar message, depending on a screen reader and its settings.
With this heading structure, the user immediately knows if the event is interesting to them. If it is, the user will manually read the content below the heading. If it is not, they will press “h” to go to the next event on the page. A correct headings structure makes life much easier.