This is Nick with Reaktiv Studios continuing the series on accessible content.
In the previous part of the content accessibility series I introduced accessibility, explained why it matters, and shared stories to help illustrate some of the experiences people with disabilities might encounter on a website.
Now, I’m going to explain semantic headings, how to use them correctly, and when to avoid them.
Semantic is a $20 word, but in this context it describes headings with the correct HTML markup, following the correct order. The good news is that you don’t need to worry about the HTML markup, the WordPress editor does a great job of that. You just need to make sure that you are using real headings, which is easy to do in the editor. Let’s look at some examples.
I’ve created this page using the block editor. The content of the page is the transcript for this video. So, now we are looking at the transcript of the video in progress, which is a bit of inception level accessibility.
Fake headings
As I scroll through the page, you will notice that the content has several headings. However, I actually created one of them wrong on purpose. If someone were using a screen reader to access the content of this post before it was published, the screen reader would not pick up the “Fake headings” heading, because it is actually a paragraph. Giving a piece of content the appearance of a heading does not make it so.
In a moment I’ll demonstrate how to identify and fix the fake headings.
Headings are very helpful for users. Sighted visitors can use headings, including the fake ones, to identify sections of content and get some idea of what is going to be in the section.
Users accessing the site with a screen reader can also scan headings. Semantic headings let them know what is on a page quickly and how to find the information they are looking for. If the page is using “fake headings” they will not be able to do that, which means going through every line of text. That can be a very long and frustrating process.
Consumable content
Headings also break up long blocks of text. This is helpful for users with cognitive disabilities as long blocks of text are difficult to read. Shorter paragraphs, lists, and headings make the content more consumable for all users.
How to use headings
Let’s look at the editor to see how to fix the fake heading and how to use them in general.
Fixing fake headings
The first thing I’ll do is open the block editor for this post, then find the fake heading. Watch as I click on the “Fake headings” heading. You will notice this is a paragraph block, not a heading block. When setting this up the wrong way, I used the controls to make it bold and larger so it looked more like a heading.
It’s ok to increase the font size and make text bold if the content isn’t an actual heading. For example, you might want to draw attention to some text that isn’t a heading. It’s best to use the text controls for a paragraph in this case because using a real heading, when it is not a heading, can also lead to confusion.
Sometimes it can be difficult to identify when to use a heading. The question to ask yourself is, “does this block of text summarize the following section in a few words?” If so, you’ve got a heading and should treat it as one.
To fix this heading I can click the change block control, which lets me switch between paragraphs, lists, and headings easily. After selecting the heading block, I can change the heading level. This block is a heading level two or “H2” and that is what I want here. I’ll explain these levels in a few seconds.
I can repeat this process for any other fake heading.
- Click the text
- Click the change block control
- Select heading
- Verify the heading level
Correctly setting headings
We’ve already talked about the definition of a heading. This is a block of text that summarizes the following content in a few words.
Headings should be succinct. Long sentences or even medium sentences make poor headings. A short sentence might work, but often headings aren’t even a sentence.
It’s also important that the headings give a sense of what will be covered in the content following the heading. This specific section that I’m covering has a heading “Correctly setting headings” so readers will know this is covering how to set headings correctly. This wouldn’t be the place to describe list controls. Also, a heading that simply said “correct use” wouldn’t be that helpful.
The next thing to understand about a heading is the order. An accessible site should have headings that follow an order tree. Generally this means a single H1, which is usually the page title, then one or more H2, and moving from H2 to H3 to H4 to H3 to H2 etc without skipping down more than one level. Here is a list that shows what this might look like
- H1
- H2
- H2
- H3
- H3
- H4
- H2
- H3
Notice there is only one H1. Then there are 3 H2. In the second H2 section there are two H3 and the second H3 has a single H4. It goes up to H2 from the H4 and that is ok, but it never goes down more than one heading at a time. A well-structured order tree is not absolutely required for an accessible site, but it is recommended because the structure is more easily navigable.
With these tips you are ready to start organizing your content with headings.
The next part will go into more detail about content structure and the controls you can use to organize your content in an accessible way.
