Web site accessibility primer - the basics
On this page: Lois explains the importance of making your web site accessible to everyone, and gives some practical tips for getting started on this inceasingly important topic. She gives particular emphasis to simple ways of improving an existing site developed in the days before accessibility was considered important.
(This article originally appeared in The Communicator, the journal of the ISTC, my trade body. It has been edited slightly for use in a wider context.)
Why should I care about web accessibility anyway?
If the ethical argument for equal access for everyone, regardless of abilities and technologies, does not sway you, then there are at least four more reasons that might:
- Whilst it isn't illegal to have an inaccessible site, the DDAs (UK, Australia) and RA Section 508 (USA) can be expected to have increasing force as case law builds up.
- By excluding visitors from your web site unnecessarily, you can damage your credibility as a professional and responsible organisation.
- By making your site accessible, you are not just catering for people with disabilities, but also those using PDAs, 3G phones, and similar devices for web access, and those in difficult (noisy, dimly-lit, etc.) situations. Even if you don't believe, for e.g., that blind or dyslexic users need to buy your goods and services, what about all those go-getting execs using their PDAs to surf in Business Class?
- An accessible site is likely to be ranked better by search engines than an inaccessible one.
What kinds of accessibility should I worry about?
- The most commonly considered group is the blind and partially-sighted, who may use screen magnification and/or screen reader technologies to get at the content of your pages. For them, you need to ensure that graphic content has text alternatives as far as practicable, that the visible page is clearly legible, and can be altered using browser preferences (for example, to change the font size). And don't forget the colour-blind, either (about 9% of men).
- Then, you need to think about people with motor impairments, who find it easier to use the keyboard or spoken commands to browse your pages, or who may be unable to control the mouse precisely. For them, you need to provide navigation that isn't dependent on accurate mousing.
- If your site has significant audio content, you need to consider providing transcripts for deaf or hard-of-hearing visitors.
- Not everyone has a broadband connection and a new PC or MAC with a large screen and the latest browser and plug-ins. So, your design needs to take technological constraints into account. The ideal is to aim for device-independence by using the latest standards sensibly, rather than being fixated with pixel-perfect precision of appearance.
- Finally, what about people with cognitive problems? The most difficult and least-researched area of accessibility. This diverse group of people is most often catered for (if at all) by specialised sites; e.g. for dyslexics, or those with severe learning difficulties.
One of the problems is that a site that is designed for maximum accessibility by one group may be extremely inaccessible by another.
However, by choosing your words carefully and adopting a clear consistent page structure, you can make things a little easier, and also assist any visitors who do not speak English (for example) as their native language.
- 3G - third generation - hi-tech mobile phones that allegedly allow a much richer communication experience - hmmm.
- ADA - Americans with Disabilities Act. Section 508 of the related Rehabilitation Act is the part that deals with accessibility of US federal web sites
- CSS - cascading style sheets. A mechanism for separating presentation from content, which HTML signally fails to do.
- DDA - Disability Discrimination Act - one each in the UK and Australia that have implications for services and products offered over the web
- HTML - hypertext markup language: the hidden code that defines how your web page looks.
- PDA - Personal Digital Assistant. Also known as palmtop.
- RNIB - Royal National Institute for the Blind
- W3C - Worldwide Web Consortium: the standards body for the web
- WAI - Web Accessibility Initiative
- XHTML - the latest and current version of HTML - a gross oversimplification, but this is a primer, after all!
OK, you convinced me. What do I need to do?
If you are serious about accessibility, you need to learn more about it. There are numerous web sites devoted to the topic, but for a simple introduction, you can start with the RNIB site and an introductory page on how people with disabilities use the web at the W3C.WAI, in all its impenetrable detail and (occasionally conflicting) advice, is considered the most authoritative source. Start gently at the accessibility intro, then dive in at WAI home page.
If you just want some quick fixes for your existing site, here are some simple steps you can take:
- First and very important, make sure all your images have alternate text (specified in the alt= attribute of the img tag). Use an empty attribute for images that are only decorative or used as spacers (alt="").
- Make sure that you can use the browser controls to increase or decrease the body text size. If not, remove any absolute font size specifications (whether these are set in font tags, or in CSS styles), and use relative ones instead.
- Don't use text/background combinations or graphical elements that rely on accurate colour perception to work.
- If the top of your page, as coded, doesn't start the main content, provide a skip to content link as the first thing on the page.
Some quick tests
The ideal is to test your site with a wide range of real users, but most people have neither the time nor the budget to do this. Here are some simple tests you can do yourself:
- Boot up your computer without a mouse. Can you navigate your site using just the keyboard?
- Take screen shots of a representative selection of pages, and paste them into an image editor. Reduce to greyscale. Is the page legible through half-closed eyes?
- Use the browser options to turn off image display. Empty the cache, and re-load your site. Does it still make sense?
- Use the browser controls to increase and decrease the default font size. Does the body text get bigger and smaller?
- Download and install the Lynx browser. Can you navigate, and make sense of, your site in this text-only tool?
If the answer to any of these questions is "No", then you probably have some problems to address (point 1 is relevant for motor impairments; points 2 to 4 for visual impairments, and point 5 is a very rough simulation of page structure for screen reader users.)
I have only included basic links in the text of this article. There was a web page on the ISTC site that supported the original paper article, with more links and references that you might find useful. I have reproduced it here as it seems to have been deleted from the original location.
There are many books on accessibility; you could try, e.g., either of: Constructing Accessible Web Sites, by Jim Thatcher et al (glasshaus; ISBN: 1904151000), or Building Accessible Websites, by Joe Clark (New Riders; ISBN: 073571150X).
Some online tools and services you can use to test your site include:
- From the horse's mouth: code and style validators from the W3C: http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/validator-uri.html
- [Bye bye] Bobby: the best known, and perhaps the most misused, accessibility tester of the bunch: as of February 1st 2008, no longer available: http://www.watchfire.com - so I assume its use will decline.
- Cynthia Says: a relatively new kid on the block, an accessibility tester preferred by some experts: http://www.cynthiasays.com
A word of caution: the output of all automated tools require intelligent analysis to ensure that you are actually improving the accessibility of your pages, rather than just complying with the algorithms used by the tools. The two are not necessarily synonymous!
I hope I have encouraged you at least to think about the accessibility of any web sites you work with. There is a lot to learn to do it right, but even taking the simplest steps is a worthwhile activity.
If you want some more pointers on specific aspects of accessibility, have a look at these pages too: