First Steps for a Website Accessibility Review
Saturday 10th January 2009
Lately I've found myself going over older websites of mine, trying to tweak them to improve their accessibility. Without creating a checklist, or recommending any automated tools to get the job done, and trying not to make reference to specific disabilities or user agents, here are the steps I take to bring some inaccessible websites up to speed.
Valid, semantic XHTML and CSS
First step is to ensure that your HTML and CSS is valid. This way you can guarantee (well, for the most part) that your site will be readable by all user agents. This will also identify any where there should be alt attributes for alternative content of images. This step also involves making sure that your code is semantic. This means using hs for headers, ps for paragraphs, marking up lists appropriately and using tables for nothing other than tabular data. It's also a good idea to ensure that the your code follows correctly.
Alternative content for media
Skip links (content, navigation, top)
Now that you've ensured that you have semantic content and there are alternatives to all types of content, the next step is make sure it's easy to get to that content. This is one of the easiest accessibility techniques to implement, and also one of the most valuable. Using an anchor (or id attribute) at the start of the pages main content area will identify it, and this can be used in a link at the start of you XHTML file to bring the user straight to the content (avoiding any headers, or long hard to tab through lists of links). It is also good practice to have a similiar "skip to navigation" link where needed, and a "back to top" link at the bottom of the page, or intermittently if the page is quite large in length.
Font size scalability
Content and background contrast is another aspect of design that could adversly affect users with visual impairment in particular. W3C Accessibility guidelines recommend certain differences in colour and contrast between text and it's background. By designing your website within the acceptable limits, and keeping in mind colours affected by colour blindness, you can make your website more accessible. If design and branding dictates that this isn't quite viable on your main site, it is a good idea to include a "high contrast" version of your site's design, accessible through a link which changes the stylesheet used. This alternate stylesheet should show content with a suitable level of contrast, without taking from the design or user experience.
A section of user often forgotten by web developers are those who can only use the keyboard to navigate their websites. With many functions of sites depending on the mouse (mouseover, hover, etc.) people using keyboards can sometimes be left behind. When using the tab key on your keyboard, you should be able to follow the website as it is laid out on the screen. This is, it follows the code of the xhtml, so ensuring the xhtml is coded in the right order can make a big difference. However, where absolute positioning is used to place content areas outside the normal flow, this can have unexpected results for keyboard users, who find that their tabbing skips large areas of content, or goes to areas of content that they don't expect to see. When using absolute positioning, it is valuable to use the tabindex attribute on your links to dictate which links "follow" the last. Starting with
tabindex="1", you can go through your code and set which items should be in what order. This can be abused, but remember, it should be used to give the user an easy way to navigate the page as they would like. Another use of the tabindex is in contact forms, or any kind of form for that matter. Using tabindex, you can assign which field follows the last, which can correct positioning fields outside semantics for layout. It is worth noting though, that semantic code that has everything in it's right place very rarely needs to be "adjusted" using the tabindex attribute.
The are a lot of other factors to be considered when trying to make your website accessible for the widest range of users. These include creating stylesheets for alternate media (handheld devices, braille, etc), and including accessible pdfs and java. There is also no substitute for rigorous testing throughout the developement process, employing alternate software and the help of marginalised users. But the points above are a good place to start, and by paying attention to these issues you'll be well on your way to making an accessible website.