In this video, learn what a heading hierarchy is, tips for when to create a new subheading, and accessibility mistakes to avoid when creating heading structures.
Transcipt
Hi, everyone. Today we’re covering headings. Headings help everyone consume your content. Visual users and screen reader users scan headings to find what they’re looking for. On top of that, most screen reader users also use headings to navigate web pages. So, your heading structure is important to help all your users quickly understand what your content is about, how it’s organized, and find the information they’re looking for.
In this video, we’ll start with learning what a heading structure is. Next, we’ll go over tips for creating a heading structure. We’ll end by reviewing mistakes to avoid.
What is a heading structure
Headings organize the content on a page. A heading hierarchy, or heading structure, is the flow of all the headings used to organize that content.
Most heading structures should start with a heading 1 and only use one h1 on the page. From there, heading 2s organize the main points that go with the heading 1. Under h2s, heading 3s can organize main points that go with the h2 they’re underneath.
There are heading 4s, 5s, and 6s. But, most pages only use h1-h3. More complex topics could benefit from additional heading levels though.
Let’s review an example of this. Here’s a page about baking chocolate chip cookies. If I write out the heading hierarchy of this page, it’d be like this:
The heading one is Making chocolate chip cookies. This summarizes all the content on the page. Next is the heading 2, Recipe. Under Recipe, are two heading 3s, Ingredients and Instructions. And lastly, there’s another heading 2, Notes. Each heading describes the content beneath it, which makes it easier for a user to read and use the content.
Imagine this page had no h2s or h3s. The user then has to read the content to first make sense of what it is and where the different information is. Then, they could actually use it to meet their goals. With headings, users can go straight to scanning to meet their goals.
Heading structure tips
Now, let’s go over the tips for creating a heading structure.
Before you write your content, write out your heading structure. This should basically be an outline of what you’re writing since your headings would be key points you want to cover. Most likely, you’ll end up re-wording some headings and removing or adding some too, and that’s okay.
When writing your heading outline, here are questions to help you know when to make a new subheading.
First, is this a new idea or topic within the heading level above it? If so, is there enough content to support a new subheading? You usually want 1-3 paragraphs under a heading.
Second, does my previous heading have too much content? Should it be broken up into subheadings? You want to avoid walls of text. If there’s multiple topics in one section of text, a heading can be a great way to break up that wall.
And lastly, should this idea or topic stand out in the content? A heading can help emphasize content for visual and assistive technology users.
When asking yourself these questions, you’ll come up with a heading structure that benefits users helping them scan and navigate pages, so they’re able to find what they need.
Heading mistakes to avoid
Let’s end with mistakes to avoid. These mistakes can make your heading structure inaccessible to screen reader users.
First, don’t use headings to create spacing on a page. This makes an empty heading. Empty headings don’t have any content in them. For visual users, it looks like a space. But, since it still has the heading styling, screen reader users now have an empty heading added to their page structure when they navigate. This can be confusing and frustrating especially if there are a lot of them.
Next, make sure your headings follow a logical flow when descending heading levels. Basically, we don’t want to skip a heading level. For example, a logical flow is going from an h2 to an h3. A skipped heading is going from an h2 to h4. Going from h4 back to h2 is not a skipped heading. Assistive technology announces the heading level, so a skipped heading can be confusing because it can make it seem like a heading and its content was missed.
Lastly, always use heading styling or the heading HTML tag to create headings. This adds HTML code that actually makes the heading a heading. When it has that code, assistive technology knows it’s a heading so screen reader users can access it using heading keyboard shortcuts and lists. If it just looks like a heading because it’s bolded and the text is larger, assistive technology won’t recognize it as a heading. It would just be more body text, so it wouldn’t be navigable using heading keyboard shortcuts or lists.
Now you know what a heading structure is, questions to help you create that heading structure, and mistakes to avoid. You’re ready to create better heading structures in your own content.