In Common Heading Mistakes, I outlined some of the most common heading mistakes I see. Those were:

1. Selecting by Style
2. Skipping Heading Levels
3. Using Formatted Text Instead of Headings
4. Using Heading 1 for Anything but the Title
5. Having No Non-Heading Content Following a Heading
6. Using Headings Sequentially

Quick Refresher

I’d recommend you at least read Common Heading Mistakes and H1: Heading are Important for extra credit. Here’s the same bare minimum I shared last time for what you need to know about headings:

[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. ((What’s up with that weird spelling? “a11y” is a common shorthand for “accessibility” because there are 11 letters between the “a” and “y”. This is a common technique for many technology concepts and companies. “l10n”is “Localization.” “i18n” is “internationalization.” “A8c” is “Automattic.” “A16z” is Andreessen Horowitz.”)) 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. ((Also, how about that mouse hover effect on the logo!? So cool!)) 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. ((There’s that “a11y” again. The wa11y plugin also includes the WAVE toolbar tool. This searches for similar and additional issues as tota11y and provides much more detailed information. That said, until you’ve mastered tota11y, WAVE is probably too complicated. For now, get excited about tota11y and don’t worry about WAVE.)) 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:

1. 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.
2. Click the “Summary” tab along the bottom of the new window to see a page outline.
3. 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.

Try to Find the Heading Error on this 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. ((Developers do play an important role is using proper structural headings on the site. You may need a developer to fix certain types of heading problems.))

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!