1. 14
    Correctly Define Heading Levels of a Web Page
    3m 49s

Correctly Define Heading Levels of a Web Page

Erin Doyle
InstructorErin Doyle

Share this video with your friends

Send Tweet
Published 2 years ago
Updated a year ago

Similar to Landmark Regions, Heading Levels are used by web browsers, plug-ins, and assistive technologies to provide in-page navigation.

Rules

  • Each page should have at least one <h1>
  • Pages should be structured in a hierarchical manner
    • <h1>: being the most important (usually page titles or main content heading)
    • <h2>: usually major section headings
    • <h3>: sub-sections of the <h2>
    • and so on
  • Do not skip heading levels - always follow consecutive order
  • Do not use text formatting, such as font size or bold to give the visual appearance of headings.
    • Use actual heading (<h1> - <h6>) for all content headings
  • Do not use heading levels to achieve visual results only

References

  • https://webaim.org/techniques/semanticstructure/
  • https://www.w3.org/WAI/tutorials/page-structure/headings/

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.

Adrian
Adrian
~ 2 years ago

Say you are making a reusable movieCard component and you don't know exactly where it will be used. What is a good way of making sure the heading levels are correct if you don't know if the component will be used after an h2/h3/etc.

Thanks for the great course!

Erin Doyle
Erin Doyleinstructor
~ 2 years ago

What is a good way of making sure the heading levels are correct if you don't know if the component will be used after an h2/h3/etc.

This is a great question! One approach you could take is to define a prop on your reusable component that takes what the heading level element should be and allow the containing component to pass that in. Here is a codesandbox example: https://codesandbox.io/s/component-with-dynamic-heading-level-f8o8d?fontsize=14&hidenavigation=1&theme=dark .

przytrzask
przytrzask
~ 6 months ago

I wonder whether those movie sections should not be wrapped in <section> ? Since <section> are identified, typically by including a heading

Thanks for the awesome course though!