Use headings correctly
Headings are just as important in documents as they are on the Web. We are not talking about click-friendly newspaper headlines, but headings that divide text into different sections. Headings help us to sim the text and for sighted readers, the headings give a quick overview of how relevant the content is.
If all the text on the web were to be presented as if it were just as important as the surroundings, without any structure or hierarchy, probably not many of us would even bother to try find things to read.
For whom is the headings important?
Main headings and subheadings create a hierarchy that is important for all readers. The headings should visually show the structure of the text to users who read with their eyes. In addition, the headings should be coded correctly, so that they provide the same good support for people who use assistive technology to read.
A correct heading structure makes it much easier for all of us to quickly get an overview and determine if you are in the right place, and it also makes reading easier and often more efficient. For people who, for various reasons, have difficulties reading, headings are even more important and they also help people with cognitive impairments to better understand what the text is about.
As a bonus, search engines also find it easier to index pages in a good way if there are relevant headings, especially main headings.
Whose responsibility is it that the headings get right?
Accessibility is everyone's responsibility. This is very clear when it comes to headings;
- Web authors who create content need to make sure that the headings are understandable, are related to the next paragraph in a logical way, are reasonably long and that they attract reading.
- Designers who create the look and feel must ensure that headings at different levels are visually clear and work with the rest of the layout. If the design and size of the headings don’t fit with how the content is used, there is a great risk that the web authors will ignore them and start to create new appearances on their own. That won't be good for anyone.
- Developers who create the templates or design the editor must make it easy for the web author to find the correct heading size and that they are correctly coded.
Example of what the heading structure might look like in the code:
<H1> Main heading </ h1>
<H2> Sub heading </ h2>
<h3> Heading level 3 </h3>
<h3> Heading level 3 </h3>
<H2> Sub heading </ h2>
What success criteria and requirements have to do with headings?
WCAG 2.1 AA:
1.3.1
1.4.12
2.4.6
Would you like to learn more about how to use headings? Funka's customised training is a good start!