Importance of HTML Headings for Accessibility

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

• Category

  Education

[Anthony Hastings]

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?

[Aaron Cannon]

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

[Aaron Cannon]

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.

[Aaron Cannon]

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.

[Athene Numphe]

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

[slinger23]

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.

[QuaverloveStudio]

Excellent! As a beginner in web designing, this is valuable information.

Many thanks.

[Saleem Jivraj]

Hi Aaron,

Many thanks for creating this video. It was very useful to hear how text readers operate.

I am a web designer and as mentioned by another post I did take the H tags for granted. I will ensure my business website as well as all my new client websites.

Saleem

Allure Web Solutions Ltd

allure-web-solutions

[Nick Bolton]

Closed this immediately upon hearing "church..."

[Josh Tumath]

It'd be great to see an updated version of this to see how modern websites use HTML5 semantic elements and ARIA to improve user experience for blind users.

[Robert Aronovici]

Wow! I take those tags for granted and now I see why they are clearly used and should be used properly. Thanks for the eye opener!

[bucky765]

awesome video, thanks for insight on the importance of html headers.

[Syl TM]

Thank you! The more access web developers have to this information, the better we will be at developing better web pages and applications. :-)

[smlefo]

I'd also like to point out to fellow web developers: it is LAW to make technology accessible *if* you are working for the US Gov't. It's called Section 508. If you are applying for a web development job that serves the gov't, you better know what section 508 is. It's pretty easy to learn the basic idea, just grab a book about it.

[AazaDana]

Thank you for a very insightful video.

[EvenGroundsInc]

Spot on. I totally agree with you that in some sites, text that should have been headings are simply bolded, and this gives screen reader users quite a challenging time. I'd also like to add that the right order of headings should be followed. Heading 1 should be followed by 2, 2 followed by 3 and so on.