Almost any web builder used today has the option to create, customize, and style headings at all levels. Headings range from a heading level 1 to a heading level 6. While it is not common to use them all, many people use them based on style and appearance rather than what they mean for users of all abilities. So let’s dive in and see how headings can enhance the user experience for all users.
How headings relate to accessibility
When we add a heading to our website, we block off a section of the page and the content that follows it. This could be a single paragraph or a spread of pictures, text, and videos. Regardless of the content between headers, headers create structure, and structure is, at the core, an accessible design.
For example, blind users cannot see the styles to tell when text is big and bold. Instead, a screen reader will likely announce something like “heading level 1, welcome to my website”. If the screen reader does not detect a heading tag, it does not announce anything and reads it as plain text. Building on that, if the heading level jumps from heading level 1 to 3 back to 2, the user might get confused about where they are on the page or feel they missed something.
However, headings not only impact blind or visually impaired users; they impact users with cognitive disabilities as well. This is especially true if global styles are applied. This can lead to heading level 1’s being the biggest and boldest, with heading 2’s and 3’s being slightly smaller with less weight. Suppose everything is exactly the same or changed somewhat. In that case, this might cause confusion about which content is essential and which is more supplemental.
Heading levels can impact all types of users, including those without disabilities, so it is vital to create a clear structure using the available heading levels. Let’s explore some of the ways this can be done.
Don’t skip heading levels
Heading levels should ascend as the content topics become smaller or more narrow. Each page should start with a heading level 1, which describes the page’s topic. The main sections of that page should then be designated as heading level 2’s with subsections being heading level 3’s. If you have more subsections, use heading levels 4’s, 5’s, and 6’s.
For example, if we had a page about Earth, the heading levels would be as follows:
-
Heading level 1 = Earth
-
Heading level 2 = Earth’s continents
-
Heading level 3 = Countries of each continent
-
Heading level 4 = States and regions in those countries.
Use true headings
Some believe that making the text large and bold or some form of fancy styling makes it a header. While it may look like a heading, it is not for users using a screen reader. Making actual headings by using the <h> tags in HTML is essential. If the content still has a <p> tag, it will be read as plain text.
It is important to note that you can still add visual styling to differentiate headings but make sure they all have the <H> tag.
Make your headings visually distinct
Building off of the last section, making your headings visually distinct helps sighted users also. People will likely skim through the page, reading only the text that stands out the most. As a rule of thumb, heading 1’s should be the largest and at or near the top of the page.
How you choose to style them is up to you and your branding. Just ensure that as the heading level gets bigger, the text gets smaller and has a different style. Keep in mind that users who are blind will not see this styling, but they will know what level the heading is. Using highlight effects, italics, bold, and other styles can make text stand out and grab attention.
Wrapping things up
It is okay to style your headers as long as they are actual headers. This ensures that all users can understand how the content is structured and intended to be engaged. Likewise, following a clear and consistent order when using headers will make it much easier for users to know when new sections begin or where subsections end.
Finally, this was a gentle reminder that not all users can skim through the page visually to see your fancy fonts and colour palettes. However, by using HTML tags and /or your builder’s styling options, you can be accessible while achieving the visual design you’re looking for.
