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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!