The importance of headings

When we talk about accessibility, there often is a lot of discussion about headings. Some are more adamant about making sure the headings follow good logic. And others are wondering why we are making such a big deal of the issue. I thought I'd try to shed some light on the topic.

What is the point of headings?

The first step to understanding the importance of headings is to know what they are for. The point of headings is to create a structure for your pages. They are like an index of a book.

Many screen reader users check all the headings on a page to see the page structure. They can also navigate from one heading to another. An illogical heading structure might make it almost impossible to understand the relationships.

When to use headings?

You should use headings when they represent the following content. You should choose the heading level based on the content.  Don't choose a heading size because it looks a certain way. 

Don't use headings to visually emphasize text. If you do that, it can get very confusing for people. If you want to achieve that, use styles and not heading tags.

Use as many headings as your content needs. While there only should be one H1 level heading, the amount for the other levels is not restricted in any way.

How to write good headings?

Headings should be short and concise. And the heading should describe the content of the following section. Good headings will make the content more glanceable.

WCAG criterion 2.4.6 (level AA) is about headings and labels. It specifies that both headings and labels should describe a topic or purpose. Criterion 2.4.10 (level AAA) is about section headings.

Skipping heading levels

Skipping heading levels is not recommended. It might not look so bad from a visual point of view. But for assistive technology users, there is a huge difference. Skipping heading levels currently only gives a warning from WCAG criteria. If you want to be as accessible as possible, try to avoid skipping heading levels whenever you can.

You should plan your page heading structure before you actually create the content. Doing this might even make it easier to write the actual content. Your thoughts might be better organized and you can maintain a logical heading structure much easier.

Not skipping heading levels sounds very simple. And in theory, it is. But in reality, it depends on the site. If you are the only one working on the site, it's relatively easy to handle logical heading levels. Because you can affect everything. But when we introduce more people to the mix, it can become more difficult. 

Working with company-level websites

Talking about company-level business, there usually are even more people involved. You might have a design team creating the page layouts. Then you will have a developer team handling the site-building. The designers and developers might even be from different companies. Their interactions would depend on the project. The more communication, the better the results will be. Someone will definitely need to have the big picture in mind. And then added to designers and developers you have all the people inputting the content.

Make sure to ensure there is enough communication in every phase of the project. Accessible content requires everyone to work together. It isn't enough if only some team in the project thinks about heading accessibility. Usually, the content editors don't have access to every heading on the site. Some headings might be automated by the website implementation. And that requires both designers and developers to see the big picture.

Tips for designers

When designing a page layout, keep in mind the page structure of similar pages. To avoid problems with headings on the designs, you need to be aware of the whole site. On the development side, things are usually created as components. The components are then reused in as many places as possible. Understanding some of the development processes might also prove useful.

Try not to make every layout as different as possible. Instead, aim for unity. This is my advice on the design as a whole. Though it does have a huge impact on heading design as well.

One tip is also to avoid having headings with capital letters. Capital letter words are slower to read for everyone. But for people with Dyslexia, the issue is much worse.

Also, keep in mind that both the developers and the content editors might not understand the way you designed the pages. So try to ensure everyone understands how you've planned the content structure.

Tips for developers

When you get a layout with some headings defined, check them all. If you notice any illogical heading levels, let the designer know. That way the problems can be fixed before the implementation starts.

If you notice a heading without any content after it, let the designer know. Don't implement an element with a weird semantic structure without at least questioning the design first.

When you start creating the elements, don't combine too different elements. Sometimes a similar element should be used with an H2 heading and sometimes with an H3. If only one of those is used, the level will be wrong in the second use case. And that's not great.

I recommend installing a browser tool that allows you to check the page heading levels. You can also check headings using a screen reader, for example, VoiceOver or NVDA.

Tips for content editors

Get to know the editor's experience of the website. Get familiar with how you can structure the content. You should be able to create accessible content. If you for any reason can't, let the right people know. It's important to fix any blockers.

If you are not sure how you should use some of the elements available, it's good to ask about those as well. If you didn't receive any user instructions, it might be a good thing to ask if instructions could be provided for you. That way you can make sure you don't create inaccessible content just because you are using an element wrong.

Make sure to get the heading levels of any automatically created headings that might affect your content.

Accessibility knowledge

Another important thing is to ensure everyone involved is aware enough of accessibility. Accessibility training might prove useful. At our company, we offer accessibility training for our clients who want to learn more. There are, of course, a lot of companies that offer these kinds of trainings. There also is a lot of good, free accessibility information online.