Web pages comprise of sections and sub-sections. Each section and sub-section has a title that acts as a heading. Headings help in defining the content’s structure and hierarchy of the web page. Content organized using headings is easier to access for different user groups.
Why are Headings Important?
- Headings give structure to a page and helps users identify different sections available on the page.
- Headings create an outline similar to a newspaper and help users to easily navigate a webpage. Sighted users can skim through the page by reading the headings and screen reader users can skim through the page by quickly navigating through the headings.
Which User Groups are benefited?
- Users with visual impairments who rely on screen readers can understand content structure as well as navigate to different sections quickly.
- Users with cognitive impairments find it easier to access the content when consistent heading styles are used.
According to a screen reader survey conducted by WebAIM in August – September 2019, 86% of screen reader users use headings to navigate either ‘often’ or ‘all the time’. Looking at the above data, importance of headings cannot be debated.
How can we Implement Headings?
As per the HTML specifications, there are 6 heading levels such as H1, H2, H3, H4, H5 and H6. The highest heading level <h1>, is used to define the main heading of the page, followed by section headings that are marked up using <h2>. Whereas sub-section headings are marked up using <h3>, <h4> and so on.
Here are some example code snippets for marking up headings.
<h1>Sitemap</h1>
(…)
<h2>Blog</h2>
Headings can be implemented using native HTML elements as described above and using ARIA as well.
We can use aria role=”heading” and “aria-level” property to define the level of headings, yes, it is preferable to use the native element to define the headings but in cases where we cannot restructure the page using HTML markup we can take help of ARIA. The use of aria should be considered as the last option.
Example Code Snippet:
<div role=”heading” aria-level=”2″>Print</div>
Which WCAG Guidelines are applicable for Headings?
- 1.3.1 Info and Relationships (Level A): This Success criteria talks about marking up headings programmatically and not through visual presentation alone.
- 2.4.6 Headings and Labels (Level AA): This success criteria talks about importance of having descriptive and concise text for headings.
- 2.4.10 Section Headings (Level AAA): This success criteria talks about the importance of section headings, adding section headings based on their importance as well as following heading sequence.
How can screen reader access Headings?
The below table presents some shortcuts to access Heading on a web page using screen readers.
| Assistive Technology | Shortcut key/Gestures | Shortcut keys to fetch list | Way of announcement |
|---|---|---|---|
| JAWS | H | Insert + F6 | Heading Text, Heading Level |
| NVDA | H | Insert + F7 | Heading Text, Heading Level |
| VoiceOver – MAC | VO + Command + H | N/A | Heading Level, Heading Text |
| Narrator | H | Caps Lock +F6 | Heading Text, Heading Level |
| ChromeVox | Search + H | N/A | Heading Text, Heading |
| VoiceOver – iOS | Rotor, swipe down | N/A | Heading Text, Heading Level |
| TalkBack |
| N/A | Heading, Heading Text |
Find the above shortcuts interesting and helpful?
Try them to get a hands-on experience of Heading with the help of screen readers.
Headings can be defined for web pages, PDF documents, Microsoft Word documents as well as mobile apps!
Would you like to assess the heading structure for your different digital assets? Write to us at sales@barrierbreak.com and our team will be happy to support!