Headings can be tricky to implement so I thought I’d pull together some quick tips on accessible headings. This isn’t a full explanation but rather a checklist to look at when you are building or testing web pages.
First a quick explanation. Heading mark up, H1 to H6, is wrapped around headings in a page to give the page structure. When headings are coded correctly voice input users, screen reader, refreshable braille display and some browser (Opera) users benefit by being able to use voice and keyboard commands to navigate between headings. This makes pages more scanable and less restrictive for users as they don’t have to navigate content linearly, which can be very time consuming. Some search engines also use headings to index pages.
So without further ado here are our top tips:
- All visual headings in web pages must have a heading structure applied using H1 to H6.
- Headings must be used to describe a page’s structure and not used for visual effects.
- Pages should only have one main heading, H1, which is the main title of the page and should be positioned at the start of unique page content.
- Headings are like a contents overview of a page. Sub headings of the H1 must be coded as H2 and subheadings of an H2 must be coded as H3.
- Heading levels can’t be skipped i.e. you can’t jump from H1 to H3.
- Headings should not be coded around content that is by itself, they should always be followed by associated content.
- Headings should not be coded around form labels i.e. the text label “Search” that comes before an input field.
- Heading structure should be consistent throughout the site.
- Add in headings to break up large chunks of text.
- Keep headings short and succinct and therefore easy to scan and understand.
You can test all the above by looking at the heading structure on this page. If you have the Web Accessibility Toolbar installed select Structure then Headings or Heading structure. Alternatively you can go to View, then Source and do a search for H1, H2 and so on.
For a really clear demo of how screen readers intereact with headings and allow users to navigate check out this video on the Importance of HTML headings for accessibility (8 mins and 41 seconds)
Got a tip you want to share? Then leave us a comment.