Heading and subheading tags play a critical role in accessibility, but many web designers overlook their functionality when building their sites. Ideally, these structural elements define the organization of each page. In practice, this isn’t always the case; designers often use <h1>, <h2>, and other heading tags as design elements, which creates frustration for some users.
This mistake often occurs because modern content management systems give users basic controls with limited guidance for using those controls. While adding content, a web designer might see that an <h1> tag makes text larger and more noticeable, so they use <h1> tags for all of their important headings. They may prefer the look of an <h3> tag for a certain heading, so they use the <h3> instead of the <h2>.
That’s a problem, since screen readers and other assistive technologies rely on accurate page structure. Heading tags are structural elements first and foremost; you can style them however you’d like, but it’s important to understand that they serve a distinct function.
If you’ve never thought about your site’s headings — or if you’re not quite sure why they’re important — a quick review of your current practices could have enormous benefits for both accessibility and search engine optimization (SEO).
How improper heading tags cause accessibility issues
The purpose of structural elements is to help software (commonly, web browsers) present content in an intuitive way. If you’re writing a lot of content, your page probably addresses several topics, and the user needs to understand how the content is structured to determine what they want to read. Headings provide this structure.
Many web users rely on subheadings without thinking about it. For instance, this section of this article has a subheading: How Improper Heading Tags Cause Accessibility Issues. If a reader already understands the basics of subheadings, they may simply want to know how headings relate to accessibility — the subheading tells them that they can find that information here.
Assistive technologies like screen readers use headings to help their users, and webmasters should understand that headings are associated with distinct navigational actions. A user might press a hotkey to move from one <h2> tag to the next <h2> tag, for instance. This is beneficial because a person with low vision or blindness, like anyone else, might not want to read large paragraphs of content to find the information they need.
When subheadings are used properly, the user can get an overview of the content and navigate easily from one section to the next. The structural elements help them perceive the website in a more natural way. That’s also true for all users, really.
If the structure of a page isn’t clear, the user may have trouble interpreting the content — even if they’re able to read everything on the page with a screen reader or other assistive device. For example, if a page jumps straight from an <h1> tag to an <h4> tag, the user might wonder whether they missed something on the page. Even if they’re able to conclude from context that the website owner simply used headings improperly, the user may feel frustrated or confused.
Fortunately, this type of experience is easy to avoid. By understanding the purpose of content structure, web designers can avoid many common mistakes.
Avoiding using headings out of order
As a general rule, headings should be used in subsequent order to enable users to quickly get relevant information. An <h1> tag defines the primary purpose of the page. An <h2> tag breaks up the content into smaller, more digestible sections; an <h3> tag would divide up the content under an <h2> tag into smaller sections, while an <h4> tag would break up the content in an <h3> tag. The tags should appear in sequential order whenever they appear, typically all the way to <h6> tags, if needed.
Each new heading level usually goes into more detail about the broader topic. This would be an optimal heading structure, provided that the website had plenty of content after each heading.
Remember, you don’t need to use every subheading level on every page — nor should you. Only use headings that help you structure your content and present it effectively to your visitors.
Make sure headings are consistent and descriptive
While you shouldn’t overthink your headings, remember that they serve an important function for your users. A descriptive heading may be much more useful to your visitors than generic text. That’s true for all visitors, not simply people with disabilities.
A generic heading might read, "More Information," which, ironically, doesn’t give much information about the content. "More Information About 2020 SUVs" might work better, as it tells the reader what information they’ll find in the section. That said, context is key. What's too vague in one instance might be perfect in another.
Writing descriptive headings has other practical benefits: Search engines treat headings as higher priority, because it helps them understand the content, too, so by incorporating useful information — and relevant keywords — you’ll make your page easier for search engines to interpret.
Keep your users in mind when structuring your content
Structuring your website properly doesn’t require tremendous amounts of time or energy. As with all aspects of web design — and all aspects of accessibility — your goal is to think about what real users want and expect.
Consider how the page will work for someone who accesses it with an assistive technology and ask yourself a few questions:
- Will users be able to navigate easily if they’re not using a mouse?
- Will your site’s structure lead them naturally from one point to the next?
- If they’re scanning your page for information, will they be able to find it easily?
