Importance of HTML Headings for Accessibility

This past few days I’ve been working on a WordPress theme and again I was faced with the question on what heading tag to use in the front page blog titles and in the articles page. This question never fails to creep up so I decided to once and for all look for a solution that I’m going to be comfortable with.

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.

Screenshot of Google's Heading Outline

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:

Screenshot of RaymondSelda.com's Heading Outline

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.

Screenshot of Article Heading Outline

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.

22 thoughts on “Importance of HTML Headings for Accessibility

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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 =)

  7. @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…

  8. 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.

  9. 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.

Leave a Reply

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


*