In Common Heading Mistakes, I outlined some of the most common heading mistakes I see. Those were:
- Selecting by Style
- Skipping Heading Levels
- Using Formatted Text Instead of Headings
- Using Heading 1 for Anything but the Title
- Having No Non-Heading Content Following a Heading
- Using Headings Sequentially
[H]eadings are a way of formatting text to divide it into sections. When used correctly, a computer can infer an outline of a page, and this is the primary purpose of headings!
Unlike some types of formatting, like italic, headings have a specific meaning so they can be used in objectively correct or incorrect ways. The rest of this article focuses on the things to avoid with headings.
Tota11y: A Great New Accessibility Testing Tool
There’s a relatively new tool that I really like for headings: tota11y.1 Tota11y is made by Khan Academy and it is a way to scan any page for multiple accessibility problems including heading issues, missing alt text, and color contrast problems.
The tota11y homepage is great as it includes both a demo and good instructions for installing tota11y for use on any webpage.2 To install it, tota11y is built as a “bookmarklet.” It’s like a bookmark, except when you open it on a page, it adds the tool rather than taking you somewhere else. Drag the tota11y button into your browser’s toolbar so it will be available any time you want to test a web page.
Other Ways to Use Tota11y
Tota11y can be installed by a developer so that it’s always available on a page. That means it can also be built into a WordPress plugin. Lucky for us, someone has done that with the plugin wa11y.3 If you’re using WordPress, you can install wa11y to use tota11y to search your own site for heading errors!
Let’s Try It Out
I’ve gone ahead and made a page that has tota11y set up already—look in the lower left corner for the eye glasses icon—and a heading error! [Cue forboding dun-dun-DUNNNN music]
Once you click the little tab, you’ll get a list of accessibility issues to search for. Choose the first one, “Headings.”
Things to notice:
- A new window appears in the bottom-right corner showing you any errors. Read the text and try to understand it before going to the bottom of the test page to read about the issue and fix.
- Click the “Summary” tab along the bottom of the new window to see a page outline.
- Each heading on the page is labeled with its heading level! Pretty neat. This is showing you which relevant HTML tags are used on the page.
Did you find it?
Now Try it On Your Own Site
The whole point of this article is to give you the tools to find problems with heading usage on your own site. This is often one of the easiest accessibility problems to fix because it is frequently caused—and fixed!—by site editors, not developers.4
Don’t Have Your Own Site?
If you’re not a site owner yourself, try it on a site for an organization you care about and let them know the results. Just last week, I used tota11y to run 5 minutes of quick tests on a new website for an organization I cared about. After finding numerous issues, I sent them an email and they’ve begun fixing them.
Your efforts can make a real difference in helping people use the internet. So please, take 10 minutes, install the tota11y bookmarklet, and see if you can find a problems. If you do, report back in the comments!