The Importance of HTML Headings for Accessibility

[Dan Schulz]

While checking my bookmarks reading the latest news, sports and of course Web industry happenings, I came across a link on a blog that revealed this gem on YouTube by accessibility consultant Aaron Cannon (via Cameron Moll) that explains why headings are important for accessibility reasons.

So why not take a few minutes (okay, eight minutes and forty-one seconds) to watch the video? (And while you're at it, don't forget to download his accessibility checklist).

http://www.youtube.com/watch?v=AmUPhEVWu_E

[M.Zeb Khan]

Some nice stuff, thanks for sharing Dan.

The accessibility checklis is a must have for designing a front end.

[Karpie]

Oooh, that clarifies things a lot in my head, including answering the age-old question of what the H1 should be - the logo or the page title!

And that checklist is pretty darn nifty, though some of the things on it aren't explained and as such don't really make sense without extra explanation - 'associate all data cells in a table with their header'? 'Ensure all videos have an accessible Play control'? And how exactly does one go navigating by keyboard, other than tabbing around?

[rreebaba]

I don’t think it’s reasonable (no matter how much I would like to try) to make our devs and designers into accessibility experts, so what can we do? If we can’t yet achieve excellent accessibility, what about simply doing better than we are doing now?

I do like this one in your list, the list is very helpful and importance for a newbie like me. Thanks.

[ro0bear]

It always amazes me how someone who is used to using a screen reader can understand what is being said when it the speed it is said is so high! I could barely understand what the sceen reader was saying in that video, yet he had slowed it down for us lol.

Great link, thanks

[jimbabwe00]

I had a blind roommate in college and I agree. It's extremely difficult to understand them(screen readers) and even after living with him for over a year I still had difficulty following it.

[franglix]

BIG thank you for sharing this. I do follow accessibility guidelines - but admittedly for SEO more than anything else. However having the reasoning literally spelt out for me in the video has clarified the issue in no uncertain terms. There should be no further shadows or excuses.

[aldomatic]

Great video!, that check-list will come into good use these next few days.

[Stormrider]

Cheers for the links - very informative, useful to hear about it from someone who actually uses a screen reader.

[DeanMarshall]

The problem with trying to get web heads like me to test sites with screenreaders is the simple lack of access to screenreaders and related software.

If I want to check what my sites look like on pdas I can download and install emulators/simulators and see for myself. When it comes to accessibility tools there are just too few of the real accessibility tools available to the web design community.

Until we can take our work for a test drive "day in, day out" (not 10, 14 or 30 day trials) then it will stay 'difficult'. It isn't impossible to test - but difficult. That barrier needs to be removed, then we can truly cater to the wider audience.

Checklists and guidelines are better than nothing - but putting a site through real use would make all the difference.

Dean

[ro0bear]

The problem with trying to get web heads like me to test sites with screenreaders is the simple lack of access to screenreaders and related software.

If I want to check what my sites look like on pdas I can download and install emulators/simulators and see for myself. When it comes to accessibility tools there are just too few of the real accessibility tools available to the web design community.

Until we can take our work for a test drive "day in, day out" (not 10, 14 or 30 day trials) then it will stay 'difficult'. It isn't impossible to test - but difficult. That barrier needs to be removed, then we can truly cater to the wider audience.

Checklists and guidelines are better than nothing - but putting a site through real use would make all the difference.

Dean

There are companies that will test your website and suggest improvements for you, but they charge. alternaltively, you could go on a short course to learn howto use a scren reader, and then test your websites with one. It depends how much effort you are willing to put in.

[Ken Sharpe]

I do something interesting that I think most people don't realize is possible. I put the content at the very top of the page as the first thing in a document, then I place the sidebar, footer, and header where ever seems appropriate after that. In the visual layout, everything sits just like one would expect it to.

My actual execution is debatable, like my "main" headings tend to be h2s for historical reasons, but overall I think the technique can be used to great effect.

Follow any link in my signature, and you'll find in the source code that the first text is an h2 followed by the content of the page. You'll find the header code way down at the bottom.

[lukemeister]

Great stuff. I would think that there are many many developers who have never seen a first hand perspective of a blind user using a screen reader, no better way to learn how to make pages accessible than to see examples first hand like that.

I got a kick out of the YouTube portion of the video, he didn't really call them out to much, but you'd think that might get YouTube's attention a little

[Rblakney]

Sorry for a dumb quesiton, but does anybody have any statistics on how many people surfing the web use site-readers? Is it worth putting on a general site, or only worth putting it on sites targeting the blind?

[Stormrider]

A 'site-reader' (I think you mean screen reader) isn't something you put on a site. It is a piece of software that guides users through a properly designed website.

[ro0bear]

Sorry for a dumb quesiton, but does anybody have any statistics on how many people surfing the web use site-readers? Is it worth putting on a general site, or only worth putting it on sites targeting the blind?

If your website is not accessible to people who are blind, you will be missing out on:

* 378,000 potential customers who are blind in the UK (Royal National Institute for the Blind).
* 2,000,000 potential customers who are visually impaired or blind in the UK (Royal National Institute for the Blind).
* 7,400,000 potential customers who are visually impaired or blind in Europe (European Blind Union).
* 1,300,000 potential customers who are blind in the USA (American Foundation for the Blind).
* 10,000,000 potential customers who are visually impaired or blind in the USA (American Foundation for the Blind).
* 162,000,000 potential customers who are visually impaired or blind World Wide (The World Blind Union).

And, its likely you are breaking accessibility laws in your country (depending on your country).

[Stomme poes]

Nice film, Dan.

I think I'd like to hire some blind screen-reader-using Dutch guys to tell me if my monstrous table-calendar experiment worked, or if I just don't need all that code. I can only test generally in a screen reader, but that's not the same as being tested by someone who's just way better at using the software. I'll never get that good at JAWS.

Ken Sharpe, someone asked me at the Perl conference if it would be considered a CSS best practise to tell people to always put their content first and CSS it back to the "standard" page style. I thought about it and then said "It depends on the site." For a bloggitty blog-blog-blog, yeah, I'd do it. But still not before the heading--that's supposed to be describing the site you've landed on, right?

But for a page like our insurance page, I would not put the content first. Someone coming to the main page doesn't want to read the content-- they want to find the specific type of insurance first-- so direct to the menu they'd want to go. After following the menu to, say, Car Insurance, they still don't want to necessarily hear all the text BS about it, as most people are looking for an online quote, or they want to log in and change something about their policy, or they want to contact us.

For those who really do want to skip to the content though, there's a nice skip link (after the name of the page, or header). Skips both the sidebar and the navigation, and goes directly to the content, which happens to often have inline links to other more specific pages anyway (since the menu was a dropdown, it needed to be built with redundancy in case people can't get it to drop down). Only thing I wonder about is, did I do enough for those who want to skip not to the content but to the sidebar (where log in or policy information is)?

Sorry for a dumb quesiton, but does anybody have any statistics on how many people surfing the web use site-readers? Is it worth putting on a general site, or only worth putting it on sites targeting the blind?

Since one of the blind visitors you are possibly trying to attract is a Search Engine Bot, yes, unconditionally yes it is always good to have your markup properly mark up your content. There is just never any point in wrapping everything on your page in <div> or <p>-- using the right tag to correctly describe the content is good policy for everyone, even though the average visual browsing individual prolly doesn't notice (though think, they would notice if you never used different font sizes etc to make headings stand out, right?).

So, the blind aside, it's a good idea all the time : ) And, if you're writing a page correctly in the first place, it should require zero extra effort, energy or time.