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.
- 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.
- Michael benefits. In Opera, he can type S to skip to the next header, or W to skip to the previous one.
- 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.)
- Don't Fake Your Markup: Accessibility Issues for CSS