Skip to main content

30 steps to a more accessible website

Step 27: Using real headers

Think of your website as an outline. The top level is labeled by your site name. On your home page, you list entries from several days. So the second level is labeled by your date descriptions: "Tuesday, July 16, 2002", or something similar. On each day, you make multiple posts, which may each have their own title. If so, then you have a third level, labeled by your individual post titles.

Now mark up your website as an outline, using real <h1> <h2> , <h3> tags. Screen readers rely on these tags to interpret the structure of your pages. Your pages do have a structure, but without proper header tags, screen readers can't find it. In a minute, I'll show you how to use CSS to make your headers look the same in visual browsers as whatever <font> based monstrosity you're currently using.

Who benefits?

  1. Jackie benefits. As soon as Jackie hits your page, JAWS announces that the page has a certain number of links and a certain number of headers. Jackie can type INSERT+F6 to hear all the headers on your page, or CTRL+INSERT+ENTER to quickly navigate through your page by skipping to the next header.
  2. Michael benefits. In Opera, he can type S to skip to the next header, or W to skip to the previous one.
  3. Google benefits. Google appreciates a well-structured page, and ranks keywords higher when they appear in real header tags. (Yet another reason to write well-crafted post titles.)

Further reading

« Step 26: Using relative font sizes | Contents| Step 28: Labeling form elements »

This guide is adapted from Dive Into Accessibility by Mark Pilgrim and is shared with the GNU Free Documentation License v1.1