What is a Heading?
The text just above, for starters, along with the title to this blog post at the top of the page, “Website Headings and Accessibility.”
Headings are much more than a change in font style to get reader attention. They provide a solid structure to the webpage. Headings, done properly, should act as an outline of your webpage. The structure should be portrayed in a visual way (i.e. top-level headings being bigger or bolder than subheadings) but also in the code (i.e. <h2></h2>, <h3></h3> tags in the html.) In that way, site visitors can see the structure, and screen readers are able to identity the structure for the users.
Sub-Headings Help to Organize the Content
When reading online, sighted users skim through headings and sub-headings, deciding what content is relevant to them. The experience is much different than, say, reading a novel. Breaking up content with headings allows the page to be easily scanned by the user.
From an accessibility point of view the structure in the code should match the visual presentation and work as a kind of table of contents for the page, with sub-headings nested inside larger topics.
Correct Heading Structure
Imagine you wanted to write a blog post about living creatures. The correct structure would look something like this:
This makes sense to the visual reader, as Catfish is an obvious sub-topic of Fish, which is a sub-topic of Different Kinds of Living Things.
In the code, a screen reader will make easy sense out of this:
<h1>Different Kinds of Living Beings</h1> <h2>Trees</h2> <h3>Alder Trees</h3> Paragraph Content <h3>Pine Trees</h3> Paragraph Content <h2>Fish</h2> <h3>Bluegill</h3> Paragraph Content <h3>Catfish</h3> Paragraph Content
Incorrect Heading Structure
Unfortunately, a lot of web creators will do something like the below, which does not make sense, either for a visual or for a screen reader. No matter how much you want to emphasize catfish, this will not work! It may grab a visual reader’s attention, but they will have lost faith (no matter how subconciously) in your ability to organize information, and therefore your knowledge of the subject under discussion.
In the example above, the creator has used a Header 2 style and changed the color of the font in order to get attention. However, that seems to put Catfish on par with Fish and Trees in the information hierarchy, confusing visual and screen readers alike. In code that might look something like this:
<h1>Different Kinds of Living Beings</h1> <h2>Trees</h2> <h3>Alder Trees</h3> Paragraph Content <h3>Pine Trees</h3> Paragraph Content <h2>Fish</h2> <h3>Bluegill</h3> Paragraph Content <h2><span style="color: #ff0000;">Catfish</span></h2> Paragraph Content
A screen reader who wants to skip over the fish section by tabbing over it will, instead, be forced to engage with the Catfish content – an unpleasant sensation if catfish aren’t your thing!
Why is the heading structure important for accessibility?
The heading structure is important for all users of the site. However, for those with cognitive disabilities, having visual clues as to the topics and hand and their relative importance, as well as relationship to one another is very helpful.
For those who use a screen reader, it’s essential.
The best example might be if you’ve ever tried to program a new smart TV using the remote, where your only options are: forward/back/select. Choosing forward or back moves you horizontally along the options, while select takes you a step down, into the choice menu. Many screen readers work in a similar way. Correctly formatted headings allow a user to find what they want without getting bogged down in, well…catfish.
For more reading, check out this article from Yale University.
Website Headings and SEO
Checking for Website Headings and Accessibility
How can you check that your heading structure is correct?
One way is to use a tool like the WAVE Evaluation Tool – a Chrome extension that looks at each website and shows accessibility issues to be fixed. Heading structure is part of its tool set. Another way is Accessibe, a plugin that checks and corrects accessibility on your website and, where it can’t be fixed automatically, lets you know what to work on.
In Conclusion
I hope this article cleared up a little confusion around website headings and accessibility. I know how tempting it is to want to use a heading style for emphasis rather than for structure.
If you’d like to read more about website headings and accessibility, check out these links.
For more about how you can fix accessibility on your site, read my article on Alt Text.
