Accessible Headings

This lesson explains Accessible Headings in web accessibility with clear examples, practical use cases, and implementation best practices.

Accessible Headings Overview

Accessible headings provide a logical structure that helps users understand the organization of a webpage. Proper heading levels make content easier to scan, improve navigation for screen reader users, enhance Search Engine Optimization (SEO), and create a better experience for everyone.

HTML provides six heading elements, from h1 through h6. These elements should be used to represent the hierarchy of content rather than simply changing the appearance of text.

Feature	Benefit
Logical Structure	Organizes page content into meaningful sections.
Screen Readers	Allows users to navigate quickly between sections.
SEO	Helps search engines understand page topics.
Readability	Makes content easier to scan.
Accessibility	Supports WCAG success criteria.
Maintainability	Creates consistent document organization.

Accessible Heading Example

<h1>Web Accessibility Guide</h1>

<h2>Introduction</h2>

<h2>WCAG Principles</h2>

<h3>Perceivable</h3>

<h3>Operable</h3>

<h2>Accessibility Testing</h2>

This example uses headings in a logical order. Screen readers can quickly navigate between heading levels, while search engines gain a better understanding of the page structure.

Heading Levels and Their Purpose

Every heading level represents the importance of a section within the page. Headings should follow a clear hierarchy without skipping levels whenever possible.

Heading	Purpose	Example
h1	Main page title	Web Accessibility Tutorial
h2	Major page sections	Accessibility Basics
h3	Subsections	Semantic HTML
h4	Nested topics	Landmark Elements
h5	Detailed subsections	Advanced Examples
h6	Lowest heading level	Additional Notes

Heading Best Practices

Best Practice	Description
Use One h1	Provide a single primary heading for the page.
Follow Hierarchy	Move from h1 to h2 to h3 in logical order.
Write Descriptive Titles	Headings should clearly describe each section.
Keep Headings Short	Use concise, meaningful text.
Use Headings for Structure	Never use headings only for visual styling.
Combine with Semantic HTML	Use headings inside sections, articles, and main content.

Common Heading Mistakes

Skipping heading levels such as jumping from h1 directly to h4.
Using multiple h1 elements without a logical document structure.
Using headings only to make text appear larger.
Leaving sections without headings.
Creating vague headings like "Section" or "Information."
Replacing headings with bold paragraphs or span elements.
Using empty heading elements.
Styling paragraphs to look like headings instead of using heading tags.

Key Takeaways

Headings organize web pages into logical sections.
Use heading elements to represent content hierarchy, not appearance.
Screen readers rely on headings for efficient navigation.
Proper headings improve accessibility and SEO.
Maintain a consistent heading order from h1 through h6.
Write concise and descriptive headings for every major section.

Pro Tip

Many screen reader users navigate an entire webpage using only headings. Before publishing a page, review the heading outline to ensure it forms a clear, logical structure that accurately represents your content.