When web pages are clearly organized with headings and subheadings, everyone benefits. Your readers can quickly find the information they need, which improves engagement — and people who use assistive technology (AT) can navigate your content without reading every single word on the page.
The Web Content Accessibility Guidelines (WCAG) version 2.1 contain two success criteria (SC) that are directly applicable to headings:
-
WCAG 2.1 SC 1.3.1, “Info and Relationships" — Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
-
WCAG 2.1 SC 2.4.6, “Headings and Labels" — Headings and labels describe topic or purpose.
These are fairly straightforward requirements, but many content creators make simple mistakes that violate one (or both) of these rules. Below, we’ll address three common subheading mistakes and explain how they can affect the experiences of users with disabilities.
1. Skipping subheading levels
In HTML, subheadings are identified with <h> tags, which should be used in a predictable order. <h1> tags are headings, while <h2> tags and other H tags are subheadings.
-
<h1> tags provide a description of the content. They may be identical to the page’s title tag.
-
<h2> tags break up the content under the <h1> tag into smaller chunks. For instance, if you’re writing a page about cat food, “Types of Cat Food" might be your <h1>, while “Wet Cat Foods" and “Dry Cat Foods" might be <h2> subheadings.
-
<h3>, <h4>, and other heading tags can break up content into additional sections. These should appear in hierarchical order.
In other words, an <h3> tag should always follow an <h2> tag, an <h4> tag should always follow an <h3> tag, and so on.
Technically, you can skip subheading levels without failing WCAG’s requirements, provided that you’re using headings in a consistent and logical way. For example, if every blog on your website skips from <h2> tags to <h4> tags, that’s not necessarily a WCAG violation — but it’s not the best practice for accessibility, since users expect subheadings to appear in sequential order.
The best practice is to use nested headings that don’t deviate from their expected hierarchy. You should also try to avoid using more than one <h1> tag per page — multiple <h1> tags won’t violate WCAG, but it may be bad for search engine optimization (SEO), and most pages don’t have enough content to justify two separate headings.
Related: If SEO Matters to Your Business, Accessibility Matters
2. Visual headings that don’t have appropriate markup
Headings and subheadings should be styled differently than the rest of the text, which helps visual users distinguish them. For example, the text above this paragraph (“Visual headings that don’t have appropriate markup") is an <h2> tag, and it’s visually distinct.
But to meet WCAG 2.1 SC 1.3.1, “Info and Relationships,” headings and subheadings must also have appropriate HTML markup — otherwise, screen readers and other AT may not identify the text as important. Without <h> tags, the user won’t be able to skip around to the different subheadings, so they’ll be forced to listen to all of the content.
If you’re working in a content management system (CMS) like Joomla or Wordpress, you might make this mistake. Remember, headings must be styled so that they’re visually distinct, but they must also be programmatically determinable: Software must be able to find them.
Related: Subheadings and Accessibility: What is a "Visual Heading?"
3. Writing vague headings that don’t describe the content
Screen reader users may skip around your page to find the information they want. Subheadings make this easier, provided that you’ve written accurate, descriptive text.
Avoid generic subheadings. An <h2> tag that reads, “More" doesn’t tell the user anything — “more information about our cat foods" is much more descriptive. It’s also better for SEO, since you’re including important keywords in your subheading.
Generally speaking, you should avoid writing multiple subheadings that contain the same text. However, identical subheadings may be defensible in some situations. For example, if you’re writing about cat food, each entry might have an <h3> tag labeled “Ingredients.”
Related: Writing Clearer Content That Benefits Accessibility Expands Your Audience
Think about assistive technology users when crafting your content
People often make mistakes when structuring their web pages because they aren’t thinking about screen readers and other AT. While you’re writing your content, you’re probably thinking about visual appearance — which is perfectly fine. After all, visual appearance plays an important role in accessibility.
However, it’s important to remember that many people use screen readers, eye-gaze systems, and other AT when viewing your website. Some people may ignore your site’s CSS (Cascading Style Sheets) to change the font appearance or to implement a more accessible color scheme.
Proper markup helps you meet the needs of all of these users. When you structure your web pages with appropriate semantic HTML, you can ensure that every individual enjoys an equivalent experience.
We’re here to help. Get started with a free WCAG 2.1 Level A/AA accessibility analysis or send us a message to start building a plan for digital compliance.
