Accessible Headings

Introduction

HTML headings are tags that are used to hold titles and subheadings on a web page. They range from H1, which holds the overall title of the page, to H2 - H6, which hold subheadings. The importance of the heading decreases as the number increases.

A good way to think about headings is to imagine a table of contents. The headings make up the important parts of your content that you would want users to find quickly.

Why are HTML Headings Important?

Headings are important for a number of reasons.

• They give order and structure to the web page, making it easier for users to understand the layout and content of the page.
• They allow the browser to index and structure the page visually, which helps users find what they are looking for.
• They allow screen reader users to skip to specific sections of the page, so they can find the information they need quickly.

What Should Be Included in a Heading?

When using headings, it is important to include descriptive titles and subheadings that accurately describe the content on the page. This will help users to find what they are looking for more easily. Headings should also be concise and to the point. They should clearly summarize the content that follows.

How to Write a Good Heading

Writing a good heading is all about being descriptive, and remembering how to nest heading sections within one another in sequential order.

Below is a code snippet example with semantic section headings.

<h1> Yoga for Developers </h1>
	<h2> What is Yoga? </h2>
		<h3> The History of Yoga </h3>
			<h4> Yoga's Origin </h4>
			<h4> Yoga in Modern Times </h4>
	<h2> The Benefit of Yoga </h2>
		<h3> Strength Conditioning </h3>
			<h4> Power Yoga </h4>
		<h3> Increasing Flexibility</h3>
			<h4> Gentle Stretches </h4>
				<h5> Stretches for the hands </h5>
					<h6> Prayer Pose </h6>
					<h6> Nerve Gliding Exercises </h6>

What Should We Avoid When Using Headings?

• Avoid using more than one H1 on a page, as this can confuse the structure and hierarchy of the page. Instead, the H1 should be used for the most important topic on the page.
• Headings should not be chosen for style purposes - use CSS to style sections instead.
• Headings should not be placed in non sequential order to ensure that the structure of the page makes sense.

WCAG Criteria

• 2.4.10 Section Headings
• 2.4.6 Headings and Labels

Test Your Knowledge

1. How many H1s should we have on our webpage?
2. Why is heading order important?
3. Why is it important to have accurate and descriptive headings?
4. How does non-semantic headings affect users of screen readers?
5. What should we use to change the style of our headings?
6. If you wanted to add another subsection under an h2 heading that is directly related to the h2 subject, what heading level would you use?
7. If you wanted to add a new subsection after an h2 that is not related to the current subsection of h2, which heading level would you use to make a new section?