Use Headers For Semantic Structure

This post originally appeared on the Yahoo! Accessibility Blog

Screen reader users have an advantage over other people when it comes to browsing web pages. The screen reader provides secondary methods to browse properly marked up pages. For instance, they can skip through the headers, lists, forms, and links. This is especially helpful when confronted with the mother of all drop-down topnavs.

Headers should define the content that immediately follows. Think of an essay that you may have written in school. The essay starts off with a title (the h1). The h1 defines what the entire paper is about. You will then define the main sections of your essay with subeaders (h2). If a section has multiple sub-sections, you'd use another header for each section (h3). Continue to increase the header number (h4, h5, h6) as the content becomes more granular. Avoid using headers without appropriate following content.

Header navigation with screen readers

NVDA

You can easily navigate the headers by pressing the h key. You can go backwards by pressing shift + h. You can also skip to certain levels by pressing the appropriate number keys, i.e. 3 will display all h3 headers.

VoiceOver

With rotor:
Use the clockwise motion and two fingers to select the headers option. Use one finger to flick up or down to navigate between the headers. Once you've found your preferred header, use two fingers and swipe down to start reading the content.

With Quicknav: press up + right arrows or up + left arrows to select headers. Press up arrow or down arrow to navigate between the headers. press down + right arrows to interact with the content.

JAWS
Press H to move from header to header. To navigate via a specific header level press the appropriate number key, i.e. pressing 3 will take you through all of the H3 tags on the page.

Listen:
You will hear VoiceOver announce the headers as it travels down the page. VoiceOver navigating via headers

Proper use of headers

The following is a random sample from Wikipedia. It uses the h1,h2,and h3 headers properly.

Sample code for proper header usage


<h1>Naperville Township, DuPage County, Illinois </h1>
<p>... </p>
<h2>Geography</h2>
<p>... </p>
<h3>Cities, towns, villages</h3>
<ul>
...
</ul>
<h3>Unincorporated towns </h3>
<ul>
...
<h3>Cemeteries</h3>
<p>...</p>

Sample from Wikipedia

Naperville Township, DuPage County, Illinois

Naperville Township is one of nine townships in DuPage County, Illinois, USA. As of the 2000 census, its population was 85,736.

Geography

According to the United States Census Bureau, Naperville Township covers an area of 35.88 square miles (92.92 square kilometers); of this, 35.28 square miles (91.38 square kilometers, 98.34 percent) is land and 0.59 square miles (1.54 square kilometers, 1.66 percent) is water.

Cities, towns, villages

Unincorporated towns

  • Batavia Junction
  • Eola
  • Frontenac

Cemeteries

The township contains these two cemeteries: Erb and Naperville.

Listen:
You will hear VoiceOver announce the headers in the Wikipedia content. VoiceOver reads content with header markup

Fake Headers

Unfortunately some developers still see headers as a decorative item. They will use divs, paragraphs, and other tags to represent headers and then use CSS to make them look big and pretty. The following is the same snippet from Wikipedia, only using non-headers for markup.

Sample code for bad pseudo-headers


<div class="fakehd">Naperville Township, DuPage County, Illinois</div>
<p>...</p>
<div class="fakehd">Geography</div>
<p>... </p>
<div class="fakehd">Cities, towns, villages </div>
<ul>
...
</ul>
<div class="fakehd">Unincorporated towns </div>
<ul>
...
</ul>
<div class="fakehd">Cemeteries </div>
<p>...</p>

Sample content with fake headers

Naperville Township, DuPage County, Illinois
Naperville Township is one of nine townships in DuPage County, Illinois, USA. As of the 2000 census, its population was 85,736.

Geography

According to the United States Census Bureau, Naperville Township covers an area of 35.88 square miles (92.92 square kilometers); of this, 35.28 square miles (91.38 square kilometers, 98.34 percent) is land and 0.59 square miles (1.54 square kilometers, 1.66 percent) is water.

Cities, towns, villages

Unincorporated towns

  • Batavia Junction
  • Eola
  • Frontenac

Cemeteries

The township contains these two cemeteries: Erb and Naperville.

Listen:
While the section may look like it has headers, it does not provide the secondary navigation ability. The text will be read with no emphasis. VoiceOver reads content with fake headers

What you can do

  • Headers determine your page's hierarchy. Try to maintain the structure of a single h1 (except when using HTML5), followed by an h2. You can have multiple h2 headers if your page can be broken into major chunks.
  • Don't use psuedo headers. They may look the same, but they offer no structure or alternate navigation
  • Keep your headers short. They should introduce the following content. They should not have more than one sentence.
  • While it is ok to have a header immediately followed by its sibling, such as a headline + subheadline, each header should be followed by its own content
  • Headers increase readability, especially with cognitive disabilities. Consider adding headers when you have 3-4 paragraphs in a row. Can you further simplify by converting paragraphs to bulleted lists?