Instructor: 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.
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.
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.
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: Headings menu.
Instructor: 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.