1. 13
    Test for Heading Level Accessibility Issues
    1m 35s

Test for Heading Level Accessibility Issues

Erin Doyle
InstructorErin Doyle
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 4 years ago

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.

~ 31 seconds ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today