Importance of HTML Headings for Accessibility

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

Category:

Education

Tags:

• html
• headings
• markup
• accessibility
• Click
• to
• add
• keywords...

[antmadferit]

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?

[gringochapin]

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

[gringochapin]

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.

[gringochapin]

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.

[athenenumphe]

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.

[bucky765]

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

[Middys1]

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.

[atrainhxdotcom]

Interesting little video.

Many thanks for sharing this.

[iskandarmsarkawi]

Thank you for sharing this video. I teach Internet technology and this video definitely helps my student on why web accessibility is so important.

[NickFreear]

Thanks. Very useful.

There's also a free/ open source screen reader for Windows - NVDA.

[MyUnv]

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!

[monfreex]

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.