The titles and headings on web pages should be checked for accessibility. The order of headings and structure of a web page can assist users with navigating content in a logical way.
- The page title should be informative and descriptive of the page’s content.
- The page should have exactly one H1 tag, which should be the first heading on the page.
- Headings should be used appropriately (i.e., H1, then H2, then H3, etc.).
- No headings should be missed or visually styled as headings but not marked up correctly.
- Headings in navigational elements, such as mega menus, are allowed.
- The use of screen reader-only headings for regions like the sidebar or footer is acceptable.
Transcript
Welcome back to the Easy A11y Guide channel. I’m Gen Herres, and in this video, I’ll be talking to you about page title and heading order.
Page title by inspecting the source code
The first thing that we’ll check for is page title. This is looking for a title tag within the header section of the HTML. To do so, we’ll inspect the source code, and within this, we want to find the head tag, and within it, the title tag. Here’s an example. I’m viewing the source code on this page, and I can see the head tag, and inside it, I can see a title tag. I have done a CTRL+F to find this title tag to make it easier for myself.
Now, I want to check to make sure that the title tag is informative. It reads out Deque Systems, Web Accessibility Software, Comma, Services, and Training. That is informative as to the purpose of the page. The next thing I want to search for is exactly one H1 or heading level one tag on this page. This is normally the first heading tag on the page. To do this, I will inspect the source code and use some browser extensions.
First, we’ll take a look at the source code. Here, I’ve pulled up the source code again, and I’ve done a search for the H1 opening tag, and I find it. This H1 should be useful and informative. In this example, it says, take the easier, faster path to digital accessibility. That is informative.
Use browser extensions to review headings
Next, I’m going to use a Chrome extension, Accessibility Insights for Web, and I’m going to turn on Headings Test. This is going to visually allow me to take a look at headings on the page. Here it has highlighted the first heading, which is an H1. Then below that, I see H2, some more H2, and nested H3s.
Finally, I’m going to take a look at the Wave browser extension. Here I have the Wave extension, and I’m on the Structure tab. Within the main part of the website, I see an H1, which is informative and useful, and then H2s below it. I want to make sure that the nested headings are appropriate. They should make a table of contents for the website.
No heading levels should be skipped, and it’s perfectly fine to have screen reader-only headings for regions like the sidebar or footer. Here I have the Wave tool open again, and I’m browsing through it, taking a look at the heading levels. It just shows me H2s, and H2s are fine.
Here I have a screen reader-only heading, which is the Page Footer, and it’s a slightly grayed-out H2 icon. I’m back on the website using the Accessibility Insights for Web Browser extension, and here I can see the H2s and nested H3s, and I’m going to quickly read through these to make sure that they make sense.
The standard structure for page headings
The standard structure for a web page is highlighted here. Exactly one, H1, which is the first heading, followed by H2s and as appropriate, H3s. We now want to check the web page for missed headings. Sometimes a page has things that are visually styled as a heading, but they are not marked up correctly. This means that not everyone can experience the use of headings and navigational uses of headings.
Here’s an example. I have opened up the Wave tool and gone to the Structure tab. On this page, there is one H2. There are absolutely zero H1s, and then it jumped straight to H4, so we’ve skipped the H3 level. I can also visually look through this site, and I see what looks like a heading, Frequently Visited Links, but it is not marked up as a heading, so People can’t navigate it, and also screen readers can’t understand it, and search engines can’t understand it.
Headings in mega menus
Now for the exception, headings in a mega menu. When you have headings that are in the navigational elements of the website, they may be before the main heading for the site. This is allowed. One example would be to have a heading that said Navigation menu, probably as a screen reader-only heading, and then go into the various headings within the mega menu, About Services, etc.
Another example would be to have the headings in the mega menu marked up just as H2s, About Services, and then go to the H1 of the website. We’ll take a look at two examples. Here’s an example showing the WAVE tool and how it helps you to see this structure. I’m on the Structure tab of the Wave tool, and I’m taking a look at the header, and it shows me that I have navigation navigation, which is visible, and within that navigation, I have a couple of H2s.
It is also showing me this hidden navigation, and that would be for the mobile menu. If it’s completely hidden from the screen reader, that’s fine. But it is important to check with the screen reader at the later point in testing to make sure that you’re not getting duplicate menus. After that, the rest of the web page looks fine as just using H2s.
Recap
So, to wrap up, we want to make sure that the web page has a meaningful title that tells us what exactly the page is about. Then we want to have exactly one, H1. The H1 should be the first heading on the page unless there is a mega menu which has H2s in it. No skipping of levels or missed headings. If it visually looks like a heading and it is informative to the structure of the page, then it should be marked up as a heading.
And finally, for some more information on headings and how to test them and what’s allowed and what’s not, you can take a look at the W3C Tutorial on Page Structure Headings, and I’ll have the link for this in the description as well.
Thanks for watching. I’m Gen Herres from the Easy A11y Guide, where we try to make accessibility easier to implement through done-for-you services, tools, and processes. If you enjoyed this video, please give it a thumbs up. It really helps our channel.
You can subscribe to our channel for more accessibility tips and to be notified when new videos are released. For more information on web accessibility, including services, tutorials, and more, please visit easya11yguide.com. Thank you so much again for watching, and I look forward to seeing you in the next video.