kmcm

Web Development with PHP, HTML, CSS, & JavaScript

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

Second step is to go through non-text content of your site (images and audio, for example). For images , the process of populating alt text is quite simple. Display the same information in the alt attribute as is displayed in the image. If it's a link, specify the link function. If the image is presentational, leave the alt text blank (My take on this is that if an image is purely presentational, it should be in the css, not the html, but that's a point for another post). Other media, such as video or audio, is a trifle more complicated. The most common way to embed either of these in a website is to use flash, often powered by javascript. I personally use swfobject, which shows the media if Javascript is enabled and the user has the required flash version. Otherwise, alternative content is displayed. If I'm using flash for navigation, this degrading process has 3 steps - flash content, javascript alternative to mimic animated behaviours, and static functionality through pure html. I tend to use jquery for this, it's unobtrusive and easy to use. For the likes of audio or video, I'm often unsure which way to go. Without flash, you can have a download link to the file itself (this covers people who can view/listen to the media, just don't have the capability in their user agent.) But this is just as useless as the media for people who will have fundamental trouble viewing or listening to it. For these users, the W3C recommendation suggests captioning or transcripts. Whilst a lot of (lazy) designers argue that the media by nature is inaccessible (music can't be heard by the deaf, etc) and they don't provide an alternative as a result, I disagree. If the media portrays information, this information should be made available to those who can't access that media. Where possible I'd add a link to audio/video transcript, just following the media itself.

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

One feature that some users may require is the ability to increase the size of the text. There are functions to do with your User Agent, but this is in many cases dependent on using relative font sizes, instead of absolute ones. It's worth nociting though, that modern screen browsers tend to magnify entire pages, which makes this redundant.When selecting font sizes, using %s or em's will enable changing font sizes, whilst you should try to avoid using absolute values like pt or px. Modern web browsers use the default font-size of 16px, in order to make this scalable, just use the % value in for the body tag, and ems to set differnt height sizes throughout your page. By setting your body font size to 62.5%, this makes it 10px. Then you can easily set font sizes around this in the rest of the page, such as 1.2em (12px) for p tags, and 2em (20px) for headings. This makes the font-sizes easy to follow, and change. This enables users to change font sizes using browser tools, and you can also change font sizes sitewide by changing the % value for the body tag. This can be achieved using alternate stylesheets, which the user can select from your site. An article on this technique can be found on A List Apart. Whilst this technique can be effective, it is javascript dependent. I have modified this slightly to use jQuery to invoke the change if javascript is enabled, while using default php to perform the action otherwise.

Contrast check

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.

Tabindex

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.