Test for Heading Level Accessibility Issues
We can find issues with heading levels by utilizing our accessibility auditing tools. The library react-axe, as well as the browser extension axe, will report any findings concerning heading levels. The browser extension tota11y will annotate all heading levels on a page and show any in red that have issues. Finally, we can check the Rotor in VoiceOver in Safari. The Rotor should have a Headings menu and will list in order all of them that are found on the page. If headings are missing or inappropriate this will help us find them as well.
Instructor: [00:00] Here I have a web page that has some accessibility issues concerning heading levels. Over here, I've got React Apps reporting any findings in the console. We can see we have a finding right here -- page must contain a level one heading. That means that this page does not have an H1 element in it.
[00:18] We can also use Totally to annotate the heading levels on the page. This will show us in red any levels that have an issue. This is telling us that the only heading level we have is actually an H5, not an H1.
[00:34] All pages should have at least one H1 heading level, and they should start with each one and be contiguous from that point on. The fact that we don't have an H1 and the only heading level that we do have is an H5 is definitely an issue.
[00:53] Here's another page we can look at to see other issues with heading levels. Here React App is telling us the same thing -- page must contain a level one heading. If we use Totally to annotate the heading levels here, we do not have an H1 heading level, we start with 5, and we go from there. Let's see what this looks like in voiceover's router.
Voiceover: [01:24] Headings menu.
Instructor: [01:26] Here's the headings menu, and the same thing as we saw in Totally. We start with a level 5 and we have only 5's and 6's for this entire page.