Header Tags and Accessibility

This week, thanks to a friend and colleague at Hello Goat Designs, I had the opportunity to do some accessibility testing on a web site he is building. I’ll share more about my findings and the final result when the site launches.

There were a few basic accessibility tweaks that I suggested, one of them relating to header tags. That gave me the inspiration for another post in my Web Accessibility 101 series.

There are a few things worth noting about properly and effectively using H1, H2, etc. These basics not only help provide an easier navigating experience for the disabled, but also get wins in search engine optimization.

Screen readers like JAWS have key commands to read off header elements, in order. For example, JAWS has a command INSERT + F6 that reads the entire list of headers, and H cycles the user through each header. The browser Opera allows you to highlight across header elements via its single-key shortcuts.

H1 should be the top level heading of a document. Often times this would be the page title. It gets huge consideration from search engines. There should only be one H1 per page.

You can use any number of H2 tags, H3 tags, and so on. And while there are six header tags, you don’t need to use all of them. There may be cases that only H1 and H2 are needed, for example. If H1 is your page title, H2’s are major headings, followed by H3 sub-headings, and so on.

Avoid skipping header tags. If there are H3’s on your page, there better be H2’s and an H1 as well. Skipping causes confusion for screen readers.

Header tags should be wrapped around actual headers or titles, not blocks of code or content. This came to mind because I recently saw a site (that was built using SharePoint Designer), that had actual tables within a header tag. That’s all kinds of wrong.

Header tags, in short, are more than just stylistic additions. For screen reader users, they are vital in giving a sense of the main topics of the page, and enabling easier navigation through your content. Additionally, effective header tag usage will get you superior search engine treatment — making your site more accessible to everybody, not just the disabled.

2 thoughts on “Header Tags and Accessibility

  1. Steve Post author

    Thanks for the comments, Paul!

    I didn’t realize, until I posted this, that there has been a heated h1 debate out there. It’s certainly interesting.

    It makes sense to me that you’d want h1s that are unique to each section or page of your site, as opposed to just one for your site name across the whole site.

    As Jared Smith pointed out on Twitter, I myself have my site name as the h1, despite my opinion on that matter. I hadn’t intended to be a hypocrite about the subject 🙂 I just haven’t fixed that in the WordPress template yet.

    I do want to read more about the other side of the argument though — so I appreciate your reference to the debate. I’m going to read up more on this to hear both sides of it.

    Thanks again!

Leave a Reply

Your email address will not be published. Required fields are marked *