Web accessibility can be regarded as a branch of web usability but actually accessibility requirements to a site are more stringent than usability requirements. This is quite logical and it stems from the functions web accessibility and web usability have - i.e. while the function of web usability is to make the site easy to use to ordinary users, the goal of web accessibility is to make sites usable by people with temporary or permanent disabilities, which prevent them from using the web the way everybody else does.
What Is Web Accessibility?
There are many sources of information about what you need to do (and not do) in order to meet web accessibility requirements. One of the definitive guides about web accessibility is the "Web Content Accessibility Guidelines 1.0" by W3C. You may also want to check its appendix: Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 by the W3C, which is shorter and can be used for quick checks if a site is accessible or not. The latest version is WCAG 2.0 and even though it is still relatively new and not widely adopted yet, you should get familiar with it as well.
The topic of web accessibility is a vast one and we couldn't cover it to the last detail. However, there are many small steps you can take in the web accessibility direction and here are some of them.
#1. Avoid using tables for layout
Many designers use tables for layout, while others consider this a bad practice. We are not going to argue if design with or without tables is better because each of them has its pros and cons but as far as web accessibility is concerned, tables are bad. Tables are non-linear and this creates a lot of problems for the devices that parse the page.
illustration from hotdesign.com
#2. Don't Use Deprecated Tags
Deprecated tags might not always be suppirted by all web browsers, thus not guaranteeing that your site is displayed correctly. Much like any language on Earth, HTML is evolving. With W3C leading the front, web development is going towards full separation between presentation and style:HTML formatting tags vs. CSS.
Deprecated tags are simply HMTL tags that are in the risk group of going obsolete. They shoud therefore not be used. Here is an extensive list of deprecated HTML tags.
#3. Write Simple
It is a known fact that the same text is more difficult to comprehend when you are listening to it than when you are reading it. For the visually impaired and audio dependent, the written language is thus vital. Avoid using long sentences and paragraphs and words that are difficult to understand.
#4. Think Navigation
When you design for visually impaired individuals, a clear, visible and understandable navigation path is very important. The structure and names of each included navigation link is thus as important as the design.
Make sure you spend some considerable time figuring out what content your visitors are looking for and then via the navigation make it super easy to reach it. Use larger font sizes for the menu items and place your link menus clearly visible. Also skip flash to not only confuse the visually impaired, but to limit search engine indexing as well.
#5. Consider Keyboard Shortcuts
Keyboard shortcuts ease navigation without the mouse. To implement keyboard accessibility on your site, here's some more information on the html-tag accesskey.
#6. Use relative font sizes
Relative font sizes give users more control over the size of the text they will display in their browsers which is why you should use relative font sizes whenever you can. Check out this great tutorial for relative font sizes by Maxdesign.com.
#7. Use textual descriptions for nontext elements
Any non-text element except spacer images and design graphics should have textual descriptions. This could be done in the <alt> tag or with a caption.
#8. Use Sitemaps
Sitemaps are a necessity in any case but when web accessibility is concerned, they are vital. Sitemaps ease navigation incredibly and you must always include them in your sites. WordPress users are recommended the Google XML Sitemaps plug-in.
#9. Don't use colors to convey information
It is not only the color blind who won't be able to read pages where color is used to convey information. Use colors as decoration, not as a way to communicate with the user.
#10. Use high contrast color combinations
High contrast color combinations are easier to read even by people without any visual impairment, so there is no reason to put for example light gray text on a white background.
#11. Don't use flickering effects
It is not only ads and animations where your head spins because of all the flickering effects. Flickering is not only bad for people with visual disabilities but it is also irritating for many others, so there is no reason to use it in your designs.
#12. Death to Frames
Frames are so last century! Even if frames were not a web accessibility sin, there is no point in using them. In case you absolutely have to use frames, provide an alternative noframes version for the modern user as well as for the impaired.
#13. Scripts and noscript versions
It is true that scripts can add a lot of functionality to a page but when due to various disabilities users can't take advantage of this advanced functionality, scripts make no sense. Additionally, in many situations scripts simply can't be executed and this is why you absolutely must take care that the noscript version of your pages has the same functionality as the scripted one.
#14. Avoid using automatic redirects
Automatic redirects are disscussable because when you use them, it is quite possible that the user might have not finished reading the text and when he or she is redirected, this makes it more difficult for him or her to follow. Also, for slideshows, presentations, and similar stuff, don't use automatic forwarding to the next slide.
#15. Use simple numbering for lists
Similarly to tables, long lists should be broken down in smaller chunks. You need to be especially careful with nested lists - nested lists 5 levels and deeper are difficult to follow even by academicians, not to mention by people with visual limitations.
#16. Add a Skip-to-Main-Content link
For site visitors who do not navigate via the mouse but the keyboard primarily, a link to help them jump to your page's main content is often appreciated. Remember to make this link as visible as possible, learn how to create a "skip navigation to content link" here.
#17. Label form elements
When form elements have labels, this makes them more user-friendly but for users with disabilities this is more than friendly - it is vital.
#18. Put the main content near the top
The top of the page is a crowded space because all important stuff (and ads) go there but since users with disabilities might not be able and/or willing to scroll down to see what's there on the page, it is even more important to put the most important things near the top of the page.
#19. Be consistent in your layout
When you are consistent in your layout, this makes navigation easier. This is especially important for people with disabilities because when navigation is easier, they have less difficulties to access your site.
#20. Define acronyms
Again, this is one more requirement that is more common sense than everything else but since it is formally part of web accessibility standards, we need to mention it. Usually the first use of an acronym is the place where you write it in full but it won't hurt if you write it in full more than once. To define acronyms, use the abbr tag.
#21. Validate your pages against the W3C requirements
Finally, if you want to make sure your pages are web accessible regarding their code, use a validator to check them.
As you see, many of these guidelines are not something extravagant. While there are some requirements that are not present when you design standard sites, many of these web accessibility requirements are just common sense or are simply general design best practices. If you follow them, everybody will benefit from your designs, so even if you are not designing sites especially for people with disabilities, it is not a waste of time to apply them.
Commented by: Jay Philips, 7 December, 2009
Awesome tips, thank you for sharing.
Commented by: Geoffrey Gordon, 7 December, 2009
Great Post, I think I will compare my website against a few of these to see where I measure up, or don't.
Commented by: Michael, 8 December, 2009
Some of these tips are great, some of them are not quite right. 1) Serious designers use CSS instead of tables 5) Access keys conflict with screen readers, which already have their own access keys 7) Alt attributes should be empty for spacer images and other images without real content 13) If scripts had no extra functionality, nobody would use them. 20) To define acronyms, use the abbr tag. A good resource for accessibility is webaim.org
Commented by: Brian Franklin, 8 December, 2009
Michael: thanks for the feedback, will look into these remarks.
cheers/Brian
Commented by: Ran Meriaz, 8 December, 2009
Another option is to use Bindows to develop a fully accessible site (as a web application) without any of the limitation listed above.
Commented by: SunJoo, 14 December, 2009
Thanks for the refreshing one.
Commented by: Derek, 18 December, 2009
Very good post - I like that you kept the content clear and simple.
I'd add though, that in many cases it's still preferable to use pixels for type, and attaching a large-size stylesheet. I certainly see the benefit of EMs, but for many cases pixels still give a great deal of control over design without necessarily negatively affecting accessibility.
Commented by: Brian Franklin, 22 December, 2009
Derek: I agree, I prefer pixels myself :-)
Commented by: Web Axe, 30 December, 2009
One of the biggest issues is missing: implement headings (H1, H2, etc.), and properly.
Michael, great comments!
Derek and Brian, you're avoiding the issue. Relative sizing is required for true web accessibility.
Unclear on #18 (content at top). If you code your site properly, I don't think this really matters.
PS: Your captcha is not accessible!
Commented by: Angela, 30 December, 2009
As other comments indicated, some of these miss the mark. Here's a good resource on web accessibility, complete with background info and detailed articles: http://www.webaim.org/intro
Commented by: Andrew, 30 December, 2009
Good catch WebAxe. I agree. The proper use of heading levels is important.
Using color to convey information isn't necessarily a bad thing. When color is the <strong>only</strong> method of communication - that is bad. You can use different shapes along with color to be accessible and increase usability for all users. For example, a red "X" next to a green "check" makes is clear which is bad and which is good.
Commented by: Andrew, 31 December, 2009
www.12345.si
Commented by: Kulin, 31 December, 2009
I still sometimes fall in the trap of using Tables instead of CSS. I will now resolve not to use it.
http://www.iastron.com/5000
Commented by: Collins, 18 February, 2010
Write Simply (vs. Simple)
(if you want to write good)
Thank you for the article!
Commented by: Art, 6 July, 2010
Your example for "Skip to main ..." looks like the skip link comes after the nav/menu controls. Doesn't that defeat the purpose?
Commented by: Web Design Delhi, 6 August, 2010
I think there can be some more additions to the list above. But these are also amazing. Thanks for sharing
Commented by: Atlanta web design, 5 November, 2010
I am working with Atlanta Web Design and your work is really nice.
Commented by: Cheap Brochure Guy, 19 November, 2010
Good tips. Looks like I have a couple areas of design I could improve in. Thanks!
Commented by: Rikker, 19 November, 2010
I really like your site <a href=http://www.killerbeeprinting.com>Cheap Brochures Guy</a>. Also, great tips for optimizing a site from this blog.