Using Headings for Accessible Content Structure

This guide was developed in alignment with WCAG 2.1 Level A/AA standards.

Headings are important for making your content organized and easy to understand. They help readers find what they need quickly and make the content clearer for everyone, including people using screen readers.

According to the 2021 Screen Reader User Survey conducted by WebAIM, 67.7% of participants rely on headings to locate information, and 85.7% consider heading levels to be either very useful or somewhat useful.

What Are Heading Levels?

Heading levels (H1, H2, H3, etc.) are used to show the structure of your content. Each level represents a different section, from the primary heading (H1) to the smallest, most specific heading level (H6).

Breakdown of Heading Levels

• H1: This is your main title. Use only one H1 on each page, as it tells readers what the entire page is about.

• H2: These headings mark the main sections of your content. They help break the content into bigger parts.

• H3: Use these for subsections under your H2 headings. They provide more details about specific topics.

• H4, H5, H6: These levels are for even more specific sections, but you’ll usually only need to use H4.

What Makes a Good Heading? 

A good heading clearly shows what the section below is about. It should be descriptive, giving readers a straightforward idea of what they can expect to find. Make it concise, clear, and easy to scan. Clear, meaningful headings also improve SEO by helping search engines understand your page structure and content.

They can serve as a summary of what follows, like a heading that says “Contact Information” to indicate that this section will provide relevant details. Headings should be clear even when skimmed. This way, each heading tells a story about what’s on the page, guiding readers through your content with ease.

Skipping Heading Levels

When creating headings, it's important to follow the correct order. Skipping heading levels (like jumping from H1 to H3 without using H2) can confuse readers and make your content harder to follow. Think of your headings as the outline of your page: each level should flow naturally from the one before it.

By structuring your headings correctly, you enhance the clarity and usability of your content for all readers.

It's Not Just About Appearance

Proper heading structure is not only about how it looks. It’s essential for organizing your content logically. When headings are used correctly:

• Improves Navigation: Readers can easily navigate through your content.

• Understanding Enhances: A logical flow helps readers understand the relationships between different sections.

• Accessibility Increases: Screen readers rely on the heading structure to convey the content’s organization to users with visual impairments.

Avoid using bold text as a substitute for a heading. If text is meant to serve as a heading, it should be formatted with the correct heading tags. While bold may visually resemble a heading, it doesn't convey the proper structure in the underlying code, which means screen readers won't recognize it correctly.