This past few days I’ve been working on a WordPress theme and again I was faced with the question on what heading tag to use in the front page blog titles and in the articles page. This question never fails to creep up so I decided to once and for all look for a solution that I’m going to be comfortable with.
Importance of Headings
According to a screenreader survey, 76% of screenreader users use headings to navigate either ‘often’ or ‘all the time’. With that statistic we can’t argue how important headings are especially for people with disabilities.
One way to make your site more accessible is through the use of headings. Headings in HTML are created with the h1-h6 elements and they should be used as headings just like the ones you see in newspapers, books and other print documents.
I’ve heard of screenreaders but I really didn’t have any idea on how a screenreader user’s experience would be like until now thanks to this video:
The video was presented by a blind person giving a brief tour how he uses a screenreader and it was really a discovery on how screenreaders actually work. Then at the end of the video he visited a big time video sharing site and I was shocked that no headings were used for accessibility navigation.
Google Is Accessible
After watching, I decided to further investigate the other sites and looked at how their headings are organized. I tried to check how Google uses headings and I was really impressed by what I saw.
You have Google’s logo for heading 1 followed by ‘Sponsored Links’ and ‘Search Results’ for heading 2 then the actual results as heading 3. What’s interesting here is that the ‘Search Results’ heading is actually hidden using CSS. This means that even if the search results page doesn’t actually show the actual text, we are assured that screenreaders will be able to navigate the document because of the meaningful markup.
Make Your Site Accessible
So I decided to tweak my headings to make it more accessible. First take a look at how the headings are outlined in your document. If you have Firebug installed you can click on Information then View Document Outline. After doing some analysis I came up with the following outline for the headings in the frontpage:
The heading outline for the article page would be different. The article title would be heading one and sub sections as heading two. The remaining headings would also be marked as heading 2 as well.
In my opinion this is the most meaningful outline for a document and I would place more importance on using headings to help people with disabilities rather than for SEO purposes. This is more or less the heading structure that I will be using in my projects.
This small changes can really help the Web to be a better place for everyone. This is only one way you could make a site accessible and I urge you to build websites to be as accessible as possible. Thoughts, comments and violent reactions are always welcome.