✎ Technique: Identifying headings

Headings are important orientation aids, and they help people quickly identify the content on your page. When headings are correctly identified, they also allow screen-reader users to quickly navigate from heading to heading using the screen reader's heading navigation functionality.

The best way to do this is to ensure that headings are identified in HTML. When using a web-content editor or a word-processing application, you can do this by making use of the heading options in the styles menu. 

Examples

✗ Bad example

It's possible to make text visually resemble a heading by making it appear more prominent than the surrounding text. In this example, the word “Mars” looks like a heading, but it’s actually plain text that has been made bold and larger.

Mars

After Earth, Mars is the next furthest planet from the Sun.

This "fake heading" won't be identified by a screen reader as a heading because there's no HTML identifying it as such. Also, if someone needed to change the appearance of headings to make them easier to read, this heading wouldn't change.

✓ Good example

In this example, visually, this content looks the same. However, the word "Mars" is now a proper heading. It's identified in HTML with an <h5> element, indicating it's a Level 5 heading.

Mars

After Earth, Mars is the next furthest planet from the Sun.

 

The level of heading reflects your page content's structure. In practice, on most web pages, you'll likely only need between one and three heading levels. Try to ensure that each heading level accurately identifies the structure of your page content: The level should reflect the depth of a section. For example, an <h5> heading would denote a subsection within an <h4> headed section.

This helps screen-reader users navigate by headings of a specific level. For example, in JAWS, it's possible to navigate to headings using either the "h" (next heading) or "5" (fifth level heading shortcut) keys. When a user arrives at the heading, whether by browsing sequentially or by using a shortcut, JAWS will say "Mars, fifth level heading."

Video: Headings in WYSIWYG editors

 

Video: Headings in WYSIWYG editors