✎ Technique: Writing headings

The most important part of any page is its content, which is made up of paragraph text and sometimes supplementary media like images or video. Headings are used to group and label sections of content, giving visual structure to the page and providing a means of navigation to screen-reader users.

Examples

Think of headings as labels that identify the content that follows. Like the text you put in links, heading text should be descriptive and make sense out of context. This is because JAWS, NVDA, and other screen reader users can use their screen reader's functions to access a collated list of headings on the page and jump directly to a selected heading. For example, in JAWS, this is possible by pressing INSERT + F6.

Bad example

Imagine you have a page with two headings for two confectionery products you sell. You should avoid cryptic whimsical headings like the following, because they offer no information about the content and mean nothing when decontextualized.


<h2>Yum yum!</h2>
<p><!-- description of first chocolate product --></p>
<h2>Yes please!</h2>
<p><!-- description of second chocolate product --></p>

Good example

In this modified example, we've kept the whimsy but provided helpful descriptions as well:


<h2>Yum yum! Dark chocolate brownies</h2>
<p><!-- description of first chocolate product --></p>
<h2>Yes please! Green candy floss</h2>
<p><!-- description of second chocolate product --></p>

Video: The NVDA heading elements list