Accessibility F.A.Q.

Bruce explains the reasons why Web Accessibility is important to all Dreamweaver professionals. It's a skill that will become increasingly demanded by clients as more and more legal test cases go to court, and is a great way of making you stand out from the crowd when tendering for jobs. Also, in the same way that architects can be sued as well as building owners if a building doesn't cater for people with disabilities, constructing accessible web sites could just save yourself a lawsuit...

What do you mean, Accessible?

• For blind users, the site's html should be coded in such a way that the special screen-reader software can pick up the text and synthesize speech for the blind/ visually impaired user to listen to.
  
• For people with a mobility disability, the site should be able to be controlled using the keyboard as well as the mouse - e.g., you should be able to tab through all fields and use the arrow keys to select items from a drop-down list.
  
• For deaf users (or those in noisy environments) spoken word information should have a transcript supplied with it, and video footage should be subtitled, or transcribed.

Why are so many sites inaccessible?

HTML has always been 'accessible' because it was designed to deal with text. During the browser wars, however, more and more proprietary tags were used, and screen readers generally don't like non-W3C tags. Also, due to a natural urge to make designs as precise as possible, pages were bloated with spacer gifs and nested tables all of which make it very difficult for a screen reader to make sense of.

Couple this with the problem of text-in-images (which screen readers can't see), and older versions of Flash - which codes text as vector graphics that are also invisible to screen readers - and you can see why so many of the sites on the Web exclude people with a disability.

I'm not trying to say that designers are evil and uncaring; it's just that if your profession revolves around making great visual designs, thinking about making that available to people without vision is a paradigm shift.

Common Accessibility Myths

• Accessible sites are boring and they all look the same.  Sure they do. Check out the different designs on www.cssZenGarden.com - they're all the same aren't they? The spitting image of www.zeldman.com, aren't they? Of course, I'm being sarcastic; the only limit to the visual attractiveness of an accessible site is your imagination.

• I've got Dreamweaver MX so I don't need to worry. Full marks to Macromedia for including Accessibility help in Dreamweaver MX, but it's not a cure-all. After all, Dreamweaver doesn't know if your image is of you at the Eiffel Tower - so can't alert you if you give it the incorrect alt attribute of "great wall of china". Neither does it know if your tabindex is ludicrous and unintuitive. Dreamweaver is a machine. It has no brain. It needs an educated, intelligent, sensitive person to design an accessible site. And that describes you perfectly, doesn't it?

• I can't use Flash. Oh, but you can; Flash Player 6 has support for Microsoft Active Accessibility (MSAA) which acts as a bridge between Macromedia Flash Player and assistive technologies such as the Window-Eyes screen reader. At the moment, that means Flash on non-Windows platform is inaccessible, it's true.

• You need a separate, accessible site. No you don't. This is actually a really bad plan; maintaining two sites instead of one, ensuring content is current on both is a massive headache. Properly coded, a site can be perfectly accessible.

• It's just too difficult. Ain't necessarily so. Read on ..

Accessibility Checklist

I hope that I've convinced you of the need to make your next site accessible. But how? Here's a list of the most important techniques that cover the majority of sites. This isn't exhaustive - but it's a good start.

• Use standard markup; HTML 4.01 or XHTML (transitional or strict). You can validate the markup here 
  
  
• Use CSS to separate styles from the content
  
  
• 'Caption' pictures with the alt attribute; in a visual browser this looks like a 'tool tip' when you mouseover an image; a screenreader reads the alt text to the user. Make sure the text is meaningful.
  
  
• Ensure that text can be resized. For users who are not blind, but have visual impairments, this is vital. Not everyone is a 20-year old designer with perfect eyesight and a 21inch monitor!
  
  
• Don't rely on JavaScript. There's no problem with JavaScript, but don't rely on it for navigation, because screen-readers, PDAs etc don't understand it.
  
  
• Ensure your forms are Accessible, otherwise the user won't be able to contact you, sign up for your newsletter or buy your wonderful product. There's an article by Rachel Andrew "Forms and Accessibility"
  
  
• Use a tab index to ensure that the user can tab through fields in a logical order. See Rachel's Article (above)
  
  
• Use Accesskeys. They're supported in all modern browsers, allowing the user to press a designer-determined key to open links. You can use a CSS class to underline the letter of the Accesskey to let users know which key you have assigned (like the underlining sign for the shortcut key in "Format" in the  Microsoft Word menu, for example).
  
  
• Ensure Accessible navigation: Don't use drop-down menus for navigation without a 'go' button to confirm the selection. Such navigation is impossible to use without a mouse. Also, warn users before spawning new windows, or they might be trying in vain to use the 'back button' when actually they're in a new window.
  
  
• Put the most important content at the top of a page. Sighted users can 'scan' a page for the main body of content; a person with a disability  must listen to a screenreader read the site from top to bottom, and could be listening to a lot of links, and logos before hearing the main content that they care about. If you can't do that, make the first item on the page a link "skip to main content" and make it invisible by having the same colour font as the background colour. Your sighted users will never know it's there; blind users will hear it on their screenreaders and thank you for it!
  
  
• Test your pages for Accessibility. When you've finished, check the page. By all means use UsableNet's LIFT tool, the Bobby or Cynthia Says validators - but they are only machines. View your site in the Lynx browser or, better still, download a speech synthesiser and then check out your site - with the monitor turned off and the mouse unplugged.