Mastering Accessible Headings
The Power of Inclusive Content: How to Make Your Headings Accessible to All
Creating inclusive content is essential for accessibility. It also helps you reach a wider audience and it can help with search engine optimization. One way to make your content more accessible — whether you’re creating a document or formatting website content — is to use an accessible heading structure.
I will give you a bunch of easy, actionable tips to make your headings more accessible, which will help the content be better understood — and by a wider audience. Plus, it can help with SEO.
Why Headings Are Important for Accessibility
Headings are important for accessibility. They provide a hierarchy for the content. There are six levels of available headings, from H1 to H6, ranking in order of most to least important.
Heading tags are also semantic tags, which mean they convey meaning.
Headings provide a visual hierarchy for sighted users, who can scan the headings of a page to see what the page is about and find what they need quickly.
They provide a structural hierarchy for users of screen readers, who may be blind or have low vision or a cognitive disability. Screen readers or other assistive technology will convey to the user that there are headings and what level they are. Users can also bring up a list of headings on a web page or in a document.
Common Accessibility Mistakes With Headings
I see a lot of the same mistakes with headings, which means the outline of the page content is disrupted and/or users of assistive technology may be confused and find it hard to navigate the content.
Using headings for looks
Something I see a lot on websites (and in documents as well, if they are tagged for accessibility) is headings chosen because of their looks — their size and weight — instead of adjusting the look of the headings in the CSS.
I also often see body text that has been formatted as a heading, so that it stands out as large and bold — again, instead of formatting it as body text and styling it in the CSS to look differently. Just because text is bold and big doesn’t mean it should be promoted to a heading.
When body text is formatted as a heading, it makes it difficult for users to navigate and understand the page content.
Not using headings
Another common mistake I see is body text that has been styled as bold but not a heading, and it introduces a new section. So it really should be a heading — not because it’s bold, but because it introduces a new section.
Using headings for SEO purposes
A lot of web designers and developers — even SEO folks — may choose a heading level based on the importance they wish to assign it (or take away from it) for SEO purposes.
For example, they might give headings in the footer area a lower-level heading such as H6, simply because that content isn’t as important as other content.
On the other hand, I also sometimes see where some headings have been formatted as a higher level than they should have in order to tell search engines they are more important.
Skipping headings
Another issue that may happen when you choose a heading based on its looks or for SEO purposes is that headings may get skipped.
Let’s say a web page has an H1 and no other headings in the main page content, then the footer has a few H6 headings. Four levels of headings got skipped in the process.
Again, all of this disrupts the outline of the page content:
- resulting in improperly ordered content that doesn’t make sense;
- making it difficult to navigate, so it takes users longer to find what they are looking for;
- causing users of assistive technology to think they missed some content somewhere.
Now, having said all that, when you go from, say, an H4 to an H2, you’re not skipping a heading level. It’s only when you go from top to bottom. Not every section will have the same number of subsections as another section.
Headings to nowhere
Another issue with headings, which I see on both websites and in documents, is text that has been formatted as a heading that has no content after it.
So, for example, an H3 that has no body text after it; only another H3 follows it.
Remember: Headings are structural and users can navigate by headings. Someone using a screen reader could pull up a list of headings on a page and then select one, go to it and find no content after it. Not very helpful.
Best Practices for Accessible Headings
Using H1
On a website, it’s best practice to have only one H1 heading, representing the main topic and title for that page and usually at the start of the page content.
Documents, on the other hand, may have more than one H1 heading, especially if they are long, complex documents where you could potentially run out of the six available heading levels. It is appropriate to use an H1 for the document title and each major section, such as a table of contents and chapter titles.
Ordering headings
Proper heading order is important. When formatting headings, it’s important to understand a bit about the content and which headings should be which level. It’s helpful to think of the heading hierarchy as an outline or a table of contents for the web page or document.
For instance, let’s say you have a page about fruit. The H1 might be “Fruit.”
A section about apples would have “Apples” as an H2. The Apples section may then talk about different types of apples, such as Granny Smith and Red Delicious. Those would then be H3 headings because they are within the Apples section. They are subheads for that section. They get more specific within the section.
Let’s say there is also a section on bananas. So that would have an H2 called “Bananas.” It is equal level to the Apples section, because they are both types of fruit.
Then there might be sections about different types of bananas, such as Cavendish and Lady Finger. So those would be headings, and they would be H3, because they are under the H2 of “Bananas.” Again, they would be headings if they introduce new sections. They would be H3s because they are subsections of the “Bananas” H2 section.
So H1 is the most general and then the H2s are more specific and H3s more specific, and so on.
It’s also good practice to use consecutive heading levels, meaning don’t skip heading levels.
Remember: Someone who cannot visually see the page content may get confused and think content was missed or it may just confuse the hierarchy of the content and affect their understanding of it.
Writing accessible headings
When coming up with headings, keep the text short and to the point.
Don’t just stuff headings with keywords for search engines. Make sure the heading text makes sense to the reader and describes the content of the section accurately.
Using images in headings
Text is not the only content that may be in a heading tag. Images can be.
Oftentimes, web designers and developers will insert an image as part of a heading to get it to align with the heading. But it really shouldn’t be part of the heading.
While you can use images in headings, I don’t recommend this, unless there is no text content in the heading. That’s because the Alt-text will get voiced as part of the heading.
Instead of getting only the text content, users of assistive technology will also get the Alt-text with it. This makes it harder for someone to find what they’re looking for.
Now, if the image is decorative and inside a heading tag and you apply null Alt-text on the web (or artifact it in a document), that’s fine. It won’t be recognized as part of the heading. It will be ignored by assistive technology.
However, if you have an image that is the only content of the heading tag, then you definitely want to add Alt-text to the image. Otherwise, if there is no text in the heading and no Alt-text on the image, then it will be an empty heading. Someone using a screen reader or other type of assistive technology may get confused and think they are missing out on some content.
Testing and Evaluating Heading Accessibility
You can check your website or documents for proper headings.
Automated checking
For websites, there are lots of automated checkers out there that will assess the heading hierarchy of a web page. One is Accessibility Checker by Equalize Digital, which is a plugin for WordPress. Another is Wave, which is a website and browser extension. There is also the Headings Map browser extension.
For documents, you can use the Acrobat accessibility checker.
There are important caveats to know about all of them though, because they are automated checkers.
Automated checkers can only detect about 25% to 30% of accessibility issues. A lot of manual checks must be done to determine certain things.
Manual checking
An automated checker, for example, can tell you if a heading level was skipped, but it cannot tell you if what was tagged as an H3 really should be an H2 or if body text that has been tagged as a heading should be inside a paragraph tag instead.
So it’s important for someone to review the content for the proper headings as well, including for brevity and clarity.
User testing
It can also be helpful to conduct user testing to assess the content of your headings to make sure they make sense for them.
Additional Accessibility Information
If you’re interested in finding out some other simple things you can do for accessibility, check out these 5 different accessibility free guides that pertain to InDesign and PDF accessibility as well as website accessibility.
Originally published as a podcast and transcript are available at https://creative-boost.com/accessible-headings/
