Correctly Define Heading Levels of a Web Page

Instructor: [00:00] Here's a web page that has some accessibility issues with heading levels. Here on the side, I've got React-axe, which is logging any findings to the console. We've got this one here, "Page must contain a level-one heading."

[00:13] If run Totally and annotate headings, we can see that the very first heading level is an h5. We need that to be an h1. Let's look at the code. Here's that h5 that we saw being reported by Totally.

[00:26] If we consider the structure of the page and the meaning we want to convey, with this being the first page of our web application, and that web application being the movie wishlist, really, we could consider movie wishlist to be our top-level heading. It's the title of the application.

[00:45] We could consider login to be a sub-level to that, as it's the title of the page. What we can do here, instead of making this whole thing an h1, let's separate these two heading levels out from each other. Let's move the header up here above the card.

[01:01] We're going to put the application title here in the h1. That's movie wishlist. Now, we can make our login title an h2. Let's see what this looks like. The finding that React-axe was reporting about missing a heading level one is now gone.

[01:20] We can now see the way we've reorganized the page a little bit. Here is our application title, and here's our page title. I think that this makes more sense visually and from the perspective of the assistive technologies, because the heading level is meant to convey the structure of the page.

[01:36] Let's look at another page with heading level issues. Again, React-axe is showing us that this page does not have a level one heading. Totally shows us that the first heading level is an h5. Let's look at the code for this.

[01:56] Looking at the code in our header, we don't even have a heading level within the header. Once again, the heading levels are meant to convey the structure of the page. Really, the page title should be an h1. Let's go ahead and add that.

[02:12] Looking through the rest of the page, the h5s being reported are within our movie component. Here's that h5, and here's the h6. If we look at what information these two heading levels contain, the h5 contains the name and year of the movie, which we can see right here.

[02:32] It makes sense that that's a heading level, because we have a section for each movie. Let's make that an h2, as that is the next contiguous heading level after our h1. Now, let's look at what's in the h6. We've got the rating, the runtime, and sometimes the genre.

[02:53] That's this line right here, and that's not really heading level. That's just information. Heading level was used originally here to achieve a certain font size, which is not what heading levels are for. They're to convey the structure of the page.

[03:06] Instead, let's just make this a p tag. Now, let's see what that looks like. Once again, our React-axe findings about heading levels are gone. If we run Totally and annotate the heading levels, we can see that they now start with an h1, continue with h2, and everything is green and appropriate.

[03:27] Finally, if we go to voiceover in Safari and look at the router...

Voiceover: [03:32] Headings menu.

Instructor: [03:33] We now can see...

Voiceover: [03:34] Heading level one. Browse movies.

Instructor: [03:36] each of the heading levels...

Voiceover: [03:38] Heading level two, four items.

Instructor: [03:39] is appropriate.

Voiceover: [03:40] Heading level two, four items. Heading level two, four items. Heading level two, four items. Heading level two, four items. Die Hard.