Importance of HTML Headings for Accessibility
Importance of Headings
According to a screenreader survey, 76% of screenreader users use headings to navigate either ‘often’ or ‘all the time’. With that statistic we can’t argue how important headings are especially for people with disabilities.
One way to make your site more accessible is through the use of headings. Headings in HTML are created with the h1-h6 elements and they should be used as headings just like the ones you see in newspapers, books and other print documents.
Screenreaders
I’ve heard of screenreaders but I really didn’t have any idea on how a screenreader user’s experience would be like until now thanks to this video:
The video was presented by a blind person giving a brief tour how he uses a screenreader and it was really a discovery on how screenreaders actually work. Then at the end of the video he visited a big time video sharing site and I was shocked that no headings were used for accessibility navigation.
Google Is Accessible
After watching, I decided to further investigate the other sites and looked at how their headings are organized. I tried to check how Google uses headings and I was really impressed by what I saw.
You have Google’s logo for heading 1 followed by ‘Sponsored Links’ and ‘Search Results’ for heading 2 then the actual results as heading 3. What’s interesting here is that the ‘Search Results’ heading is actually hidden using CSS. This means that even if the search results page doesn’t actually show the actual text, we are assured that screenreaders will be able to navigate the document because of the meaningful markup.
Make Your Site Accessible
So I decided to tweak my headings to make it more accessible. First take a look at how the headings are outlined in your document. If you have Firebug installed you can click on Information then View Document Outline. After doing some analysis I came up with the following outline for the headings in the frontpage:
The heading outline for the article page would be different. The article title would be heading one and sub sections as heading two. The remaining headings would also be marked as heading 2 as well.
In my opinion this is the most meaningful outline for a document and I would place more importance on using headings to help people with disabilities rather than for SEO purposes. This is more or less the heading structure that I will be using in my projects.
Conclusion
This small changes can really help the Web to be a better place for everyone. This is only one way you could make a site accessible and I urge you to build websites to be as accessible as possible. Thoughts, comments and violent reactions are always welcome.
Trackbacks and Pingbacks
- CSS Brigit | Importance of HTML Headings for Accessibility
- Twitted by gusribeiro
- Friday Focus 05/22/09: Headshots | Devlounge
- Τα καλύτερα links - Μάιος 09 | Tsevdos.com
- Friday Focus 05/22/09: Headshots | rapid-DEV.net
- Ce qui est à faire et à éviter en matière de conception web « iFolio
- jQuery UI Sortable Tabs with Accordions « streamhacker.com
- 11 Tips Menulis Agar Tulisan di Blog Anda Lebih Mempesona | Bloggingly | semua tentang blog. dari tips ngeblog (blogging), hingga budaya ngeblog (blogging culture)
- 11 Tips Menulis Agar Tulisan di Blog Anda Lebih Mempesona
Watching the video was really enlightening. I’m happy to say I do make use of headings when design and developing sites and given what I just watched I think my sites would be accessible. Still I hadn’t realized how the heading tags were so useful for navigating on a screen reader.
Every web designer should have to watch that video. Beyond headings I have a much better understanding of how a screen reader works.
That video was great. I had an idea, but wasn’t sure exactly how the screenreaders worked. I’ll keep this in mind on my next site.
Glad you liked the video guys. The sole purpose of this article is to help people be more aware of how headings can make a site more accessible to a wider audience. Thanks for the comments.
Why aren’t you using headers in a semantically correct way by listing from H1 to H6 rather than a load of H2 or H3 headers?
Now I could be wrong but I’m sure I have heard from people in both Yahoo! and Google that your tag should match your (or just make sure your is the main title of your page. e.g. not your company name)?
I might be mistaking this advice for more SEO purposes rather than semantic best practices though.
Didn’t know you could use Firebug for that. I have been using Opera’s Web Developer Options (from the context menu) > Display > Table of Contents.
Useful. Thanks for sharing.
Actually, it’s not Firebug, it’s Web Developer Toolbar.
I don’t blame him for mixing it up, though, as both are very popular =)
@Andy: If I get you correctly, I think you’ve misunderstood the concept of h1-h6. It is perfectly valid to have several equally weighed headers under a header of higher level (e.g. five h2-headers under the main h1-header).
The numbers does not refer to the actual number of the header (e.g. header number 4 on a page is h4). If that were the case, only 6 headers would be supported…
Thank you very much! I always tried to make sites accessible (no table-layouts, alt tags inside img ecc.), but this video/article helped me understanding further this topic..
will keep in in mind for my next web-page.
Great post… good suggestions…thanks!
Very, very interesting post.
For the most part, I agree with you.
Thanks for the information .
I found a really easy to follow guide about how to put together headers in html. Here’s the link:
http://www.thoughtcrux.com/blog/html-heading-guide
HTML headings are part of web design and also help in search engines access. So, one must use appropriate headings based on the most important keywords of a web page.