Skip to main content

Everything you need to know about Headings in WCAG

13 January, 2021 by Jayshree Sharma

a lady working on a laptop. 'Headings in WCAG' in text

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 201986% 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. 

Examples of HTML heading elements H1 to H6.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 
  • Swipe up or down 
  • LCM: Headings -swipe up, then right 

 

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! 

Comments

Not yet commented

Leave a reply

This field is required.
This field is required.
This field is required.