HTML headings for Accessibility
Sunday, 16 August 2009
One thing which is often overlooked in accessible webpage design is the correct use of HTML headings. The headings (coded as H1-H6 tags) are important for users who navigate webpages using screen readers, keyboard input, refreshable braille displays, voice commands and other assistive technologies. Headings basically enable users to navigate / scan a webpage more easily and quickly, by indicating the beginning of sections / sub-sections.
A screenreader survey by webaim suggests that 76% of screenreader users navigate using headings 'often' or 'all the time'. This just shows the importance of correct use of headings for accessibility design. 
(image source : http://webaim.org/projects/screenreadersurvey/#headings)
There are several 'HTML heading' rules that I follow in my webdesign:
1) Only use one H1. This should be the main page heading. Opinion is divided whether this is required for accessibility, but in my experience, having more than one H1 causes usability issues for blind users.
2) Headings should not be skipped, i.e. H2 should follow H1, H3 should follow H2 etc.
3) Headings should be used to break up long articles.
4) Headings should be informative about the subject matter, yet short and scannable.
5) Headings should be used to structure the webpage, not to format textual elements.
If you have any general rules that you use in your everyday webdesign, I would be interested to hear from you.
Here is a video from youtube about the 'Importance of HTML Headings for Accessibility'. This is a really informative video, and well worth a watch:
(If you can't access the embedded video, please navigate directly to youtube by clicking the link here: Importance of HTML Headings for Accessibility
I hope this post has been informative, if you would like any additional information, please contact me directly via : Simplicity User Experience Optimisation
Posted byCharlie M at 01:34
Labels: accessibility, html headings, youtube