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:

  1. 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.
  2. By excluding visitors from your web site unnecessarily, you can damage your credibility as a professional and responsible organisation.
  3. 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?
  4. An accessible site is likely to be ranked better by search engines than an inaccessible one.

What kinds of accessibility should I worry about?

Jargon buster:

  • 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 link to external site RNIB site and an link to external site 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 » link to another, external, site accessibility intro, then dive in at link to external site WAI home page.

If you just want some quick fixes for your existing site, here are some simple steps you can take:

  1. 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="").
  2. 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.
  3. Don't use text/background combinations or graphical elements that rely on accurate colour perception to work.
  4. 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.

That's the really easy fixes! More thorough accommodation of accessibility probably requires a complete overhaul of your existing site, for example to remove complex layout tables, use proper structural markup, code to modern device-independent standards (XHTML/ CSS), provide alternatives for non-HTML content (in Flash, movies, PDF, JavaScript etc.) - the list goes on. (As with most things, it is most efficient to build a web site using accessibility principles from the first, rather than retro-fitting them.)

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:

  1. Boot up your computer without a mouse. Can you navigate your site using just the keyboard?
  2. 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?
  3. Use the browser options to turn off image display. Empty the cache, and re-load your site. Does it still make sense?
  4. Use the browser controls to increase and decrease the default font size. Does the body text get bigger and smaller?
  5. Download and install the link to external site 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.)

Resources

Links

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.

Books

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).

Online tools

Some online tools and services you can use to test your site include:

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!

Conclusion

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: