In this video, we cover five heading accessibility issues. Avoiding these helps you create a logical heading structure with the proper HTML so users with disabilities can actually use the headings to understand how your content is organized and navigate it.
Transcript
Hi everyone! In this video, we’ll cover five heading accessibility issues.
Check out our other heading videos to learn how to check your headings for these issues, hear screen readers announce headings, and learn how to make better heading structures.
Why headings matters
Headings quickly help all users understand how the page is organized and find the content they’re looking for. Assistive technology users also use headings to navigate content. For example, a screen reader user can navigate a heading list to choose where they want to go on the page.
Avoiding these five issues helps you create a logical heading structure with the proper HTML so users with disabilities can actually use the headings to understand how your content is organized and navigate it.
Let’s go over each issue.
Empty headings
The first one is an Empty heading. An empty heading means a heading element is in the HTML, but there’s no content. Visually, it’s just a blank space, but the HTML would be a blank heading tag.
This is an issue because assistive technology still interacts with the blank heading since it’s in the HTML.
Sometimes, content editors purposefully add a blank heading to create a large blank space without knowing that it causes accessibility issues. If extra spacing is needed, you should use HTML and CSS or a spacer element in your content management system.
Skipped heading level
The next issue is a skipped heading level. This means a heading level was skipped in the heading structure. For example, going from a heading 1 to a heading 3 would be a skipped heading level.
When a heading is skipped, an assistive technology user could think they missed a heading or aren’t able to access it.
Skipped headings can also happen when content editors or developers use headings for styling. For example, the text needs to be larger, so they use a heading 4 or 5 to make that text bigger.
Even if using a heading to make the text bigger doesn’t cause a skipped heading, it is still confusing because now assistive technology thinks that paragraph text is a heading. For a screen reader user, they would hear that paragraph text when navigating by headings since it has heading HTML. Or, someone using a braille output device would get that entire paragraph text printed in heading formatting. This makes it harder to use headings to navigate and understand the structure of the page.
Missing first level heading
The third heading accessibility issue is a missing first level heading.
Missing first-level heading means the heading 1 is missing from the page. Most pages should have a heading 1, so users know what the page is about. If you use a CMS, the page title field is usually the page’s heading 1.
No heading structure
Fourth is no heading structure.
No heading structure means there are no headings on the page. Most web pages should have even a simple heading structure to make it easier for all types of users to navigate the page.
Possible headings
Lastly are Possible heading issues. This means the text is large paragraph text that might need to be changed to an actual heading HTML. Visually, the text might look the same – the difference is in the HTML code.
Again, headings must be defined as headings in the HTML so assistive technology can interact with it and present it to the user as a heading. If it’s paragraph HTML that is just bolded or styled bigger, assistive technology doesn’t know it’s a heading.
Find heading issues
Now that you know more about heading accessibility issues, the next step is to find heading-related issues on your own website. You can start finding issues today with our Free Plan for the Pope Tech Web Accessibility Platform – up to 25 pages, free for life, and no credit card required. Learn more in the resources below, and remember to subscribe for more accessibility videos.