Importance of HTML Headings for Accessibility


A brief demo and discussion of why HTML headings are so important for screenreader users.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Reddit
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis


25 Responses to “Importance of HTML Headings for Accessibility”

  1. MyUnv says:

    Thanks a ton, this video helped a ton and helps me feel good that I used a lot of header tags on my site in what I think logic places. I realized how helpful they can be to you, and so I think I will keep even more priority to them since that’s how you navigate.

    @athenenumphe: I’ll check out FANGS seems useful!

  2. monfreex says:

    Thank you for putting this video up. There’s been a lot of debate on what headings should be used in a document and this video definitely helped a lot because the most important use of headings would be for screenreaders.

  3. athenenumphe says:

    As a sighted person, I really like using the Firefox Add-on Fangs to see how a screen reader would read a web page.

  4. slinger23 says:

    As a ’sighted’ web designer, I’ve found it’s helpful to scan over my designs using Lynx, an old text-based browser. It has some similar features/limitations to screen reader software, and can help you catch many of the more blatant accessibility issues. Highly recommended for all designers and front-end developers.

  5. SoggyGibblets says:

    Thanks so much ! I’ve been trying to explain some of these concepts to people for a long time. It is such a shame alot of the web is made by cowboys (or cowgirls) and sighted users are normally so disinterested in making things properly because all they SEE is pretty graphics :(

  6. gringochapin says:

    Wow, and I thought I was making the voice very slow for this video. I generally run it at at least twice that rate.

  7. LavaIce99 says:

    This was a good insight into why developing using standards is important. Thanks for sharing.

  8. schalkn says:

    You can set the speech rate and advanced screen reader users tend to have theirs set fast as they become more and more accustomed to it.

  9. strottrot says:

    Great video! Thank you.
    (You can download a demo version of both Jaws and WindowsEyes. They only run for 40 minutes at a time, but the demo doesn’t end after a certain number of days.)

  10. antmadferit says:

    This was a great eye opener for me. I have been a designer and developer for years now but I have never actually looked this in-depth into screen readers.

    Can I ask a personal question, do you not find the voice reads very fast?

  11. ryanisnan says:

    Great Video, thanks for it.

  12. chamillion02 says:

    my tutorial for how to make an html header here watch?v=qCBEogeyFQc&fmt=18

  13. ruempel says:

    woops, marked tactics2′ comment accidental as spam – sorry. Can’t replay anymore.

    I’m interested in it, too.
    What do you think about the use of H1. Should it be the sites title (where are you) or the contents title (what is it about)?

  14. tactics2 says:

    Very informative video Eric. Since Jaws is extremely expensive ($900) and not available for the Mac, very few sighted developers have access to it for testing. So it’s great to see a live demo of how it works in practice. There’s been an ongoing debate about whether or not to make your site name an h1 tag or not. I think this clearly shows that you shouldn’t.

  15. youtubby01 says:

    most helpfull, thanks for bringing this to our attention.

  16. gringochapin says:

    I’m not ignoring the other question about what other sites do a good or bad job with headings, it’s just that YouTube doesn’t seem to permit URLs in comments. Still, I’ll give it a shot. One that uses them relatively well is a big competetor with Amazon and their name has a B and an & and an N. The other that uses them poorly is spelled “bee you why dot calm”. Hopefully that’s clear enough.

  17. gringochapin says:

    Thanks all for the feedback. The screenreader used to make this video is Jaws for Windows version 9.0 (the latest version currently) available from Freedom Scientific.

  18. mshort1985 says:

    Thanks so much for this, I’m going to my blog right now to make sure its all set out properly :-)

  19. surfwax95 says:

    More please! This was great!

  20. blackshtef says:

    The screen reader software is Jaws.

  21. pathetix says:

    Wow. This is really an eye opener for me. I have always known headings are important for both off-screen readers and web browsers. But your video really shows it clearly.

    Thanks for recording this. What screen reader do you use by the way? I want to check for future sites that I will be making.

    Brilliant video!

  22. katebp says:

    Brilliant video, thanks so much for taking the time to make and post this.

  23. mmcritter says:

    Great job Eric! Keep them coming!

  24. hackworth says:

    I hope someone at Youtube sees this.

  25. josephmako says:

    Thank you for putting this together. Are there other sites out there that you would expect to use the heading tag well that don’t? Or, can you point out other sites that effectively use this tag?

Leave a Reply