Image Description: A person sits on the floor with a computer in their lap. Behind them is a larger screen that displays them writing code to properly order headings.
If you’re like many internet users, your email inbox is home to several newsletters from organizations, and you’ve fallen down a research rabbit holes reading blogs and other written content. These written mediums serve as tools for marketers, writers, businesses, and everyday users looking to learn and share content. However, they’re not always accessible to all users. One main reason for this is the misuse and lack of general education surrounding proper heading use.
When we speak about digital accessibility, it is critical to remember that it impacts everyone. Newsletters, blogs, and articles become more readable with the inclusion of headings and clear visual hierarchy. Proper heading use can help any reader gain insight into the main ideas of your content. It can help people who use screen readers navigate content. It can also help people find content quickly and process content more easily.
In this article, we’ll define headings and hierarchy, show you how to implement them in your work, and give you a short list of tips as you start to make your blogs, newsletters, and other digital content accessible.
Headings and Hierarchy
Headings help communicate the organization of a page by breaking down the content into sections. They are short descriptions of the content that follows them. For instance, if you were writing a blog post about fruit your headings would likely be different types of fruit.
Hierarchy helps further organize pages and documents by describing a heading’s level of importance. Most content management systems (CMS) and word processors give headings a number to describe their importance, starting with the most important heading, Heading 1. By using headings appropriate to the hierarchy of your document, you will help your audience better navigate your content. An example of proper hierarchy using headings follows below using a list of fruits and vegetables:
Types of Fruits and Vegetables (Title or Heading 1)
- Vegetables (Heading 2)
- Pepper (Heading 3)
- Orange Bell Pepper (Heading 4)
- Carrot (Heading 3)
- Purple Carrot (Heading 4)
- Pepper (Heading 3)
- Fruits (Heading 2)
- Apples (Heading 3)
- Honey Crisp Apples (Heading 4)
- Berries (Heading 3)
- Blackberries (Heading 4)
- Apples (Heading 3)
In this example, the title, or Heading 1, describes what the list is about. Heading 2 breaks the list into the most significant categories, fruits, and vegetables. Then, Heading 3 describes things that fall under Heading two, different types of fruits or vegetables. Finally, Heading 4 breaks down every heading 3 into even more specific categories of fruits and vegetables, like types of apples. This makes the list easy to navigate and can help readers determine what is most important and how the content is organized.
The way you set up headings in a document may be different depending on the CMS or word processors you are using. Google Docs, Microsoft Word, Pages, and WordPress all have guides on how you can do this within their systems and you’ll want to check the documentation for your specific CMS. Here are some considerations you should make no matter what CMS or word processor you’re using.
- Do not select a heading based on its color, size, or font. You are able to change these within your CMS or word processor. Only select a heading for its proper hierarchical position.
- Only use Heading 1 or the Title Heading for your main title. There should only be one Heading 1 per page. The first main section in your document, beyond your title, should start with a Heading 2.
- Use the “normal” text option for body text and paragraphs, rather than subheadings.
- Make sure to use heading levels sequentially. Headings should be used in order so that their numbers correspond to their hierarchy. If you used a Heading 2 for a section title and then needed to use another heading within that section, the next heading level to use would be Heading 3, then Heading 4, and so on.
- Keep heading levels consistent. It’s okay to use more than one Heading 2 in a document, provided it’s used consistently. In our fruits example, notice that we’ve used a Heading 2 to separate the “Fruits” and “Vegetables” sections. This makes it easier for assistive technology to understand the structure of your document and makes it easier to navigate between the separate sections of the text.
- Avoid creating a textbox to caption or configure content. Most word processors create text boxes as a separate element from the document’s main text layer, meaning they can be challenging to navigate using assistive technology. Instead, opt for using the word processor’s built-in formatting functions and captions tools.
Using proper headings and hierarchy can make your content more accessible to everyone. It is also something that is simple to implement once you get the hang of it. If you’re interested in looking deeper into this concept, you can check out Web Design’s full guide to the importance of headings. Additionally, for more accessibility resources check out our introduction to accessibility blog. If you have questions about accessibility at Portland State University, you are able to contact and learn more about the Portland State Disability Resource Center on their website.