Header Tags and Accessibility
June 4th, 2009 by Steve | Filed under Web Accessibility 101 series.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.
Tags: h1, h2, h3, header tags, jaws, opera, screen readers, search engine optimization
Steve Grobschmidt is a User Experience Lead with over twelve years in the web industry. He is on a mission to ensure that user experience, especially accessibility, is foremost in the creation of great products.
A nice description of headings, and semantic use. It certainly sparked some heated opinions when I created the H1 Debate: http://www.h1debate.com
I also wrote my personal opinion about the subject on my blog: http://prandall.com/2009/02/06/the-h1-debate/
One other thing to point out is that the order should go h1,h2,h3. You cannot got h1,h4,h4,h2,h3. I found a link to back this up a while ago in the W3C documentation.
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!