Web worker’s log #3 – Accessibility dilemma

For some time I have been contemplating whether I should follow HTML5 guidelines when it comes to usage of h1-h6 tags or whether I should follow my instinct and experience with screen readers. For those who don’t know what I am talking about I’ll summarize it:

  • HTML4 and XHMTL didn’t allow to use more than one h1 per page because it was considered the most important thing on the web page
  • HTML5 allows to use more than one h1 on a web page
  • Some wide spread screen readers, such as VoiceOver on Macs, currently don’t support HTML5 syntax when it comes to h1-h6 on web pages

This has me kept from doing a lot of work because I don’t want to make sloppy work. Until recently I was thinking that not using the latest conventions meant that I am a bad web designer and web developer. The thing which made me see things differently are my own invisible disabilities which force me to use multiple assistive technology gadgets. Now I prefer to use and make things which allow access. HTML5 syntax doesn’t always allow access.

I am not blind but I live with with dyslexia, some days it is mild form, other days I can’t read without screen reader texts longer than tweets. And even when I can understand the web page visually it still confuses me when headings don’t follow some kind of structure.

Bad structure:

In the example above you can probably see, depending how you wrote your CSS, where everything should be but when the sound is your main input you’ll be left confused regardless of your ability to see.

Good structure:

We can discuss if there should be  <header> tag or not but that’s not that relevant. What is the relevant is that by not using h1 and h2 inside of the article you can help others with access to your content. Using multiple h1 tags should be in the category “The fact that you can doesn’t mean that you should.”