Summertown Solutions Ltd for interaction design, London, WC2

Software for accessibility and usability

A full version of this article is available at http://www.managers.org.uk/ (written, July 2003)

krug nielsen pic If you are designing for brand new technologies, try and find an interim solution so that users with older browsers can still use the site. For example, older browsers cannot correctly interpret empty boxes in tables which make the layout look pretty. And when using Flash provide an alternative text only page. See http://www.tasi.ac.uk/advice/advice.html for more advice.

Syntax: XHTML and CSS

Ensuring your website is syntactically correct can be difficult to do by hand. There two W3C validators which will point out any coding errors you may have in your X/HTML and your CSS:

How others ‘see’ your site

People 'read' in different ways, help them get the most out of your site:

Different levels of accessibility

There are different levels of detail in the guidelines at http://www.w3.org/WAI/References/Browsing. For most companies just priority 1 or top level is sufficient. However, if you wish to comply with the lower priorities and then have them checked automatically http://aprompt.snow.utoronto.ca/download.html is the place for you.

Create alternative text only pages

Creating alternative text-only pages can be time consuming and often sites who have them do not always update them as much as they do the more attractive sites. The BBC can help you quickly create alternative text pages at http://www.bbc.co.uk/education/betsie/index.html

Evaluating transformation pages

Make sure that your pages work even users have browsers that do not support style sheets, applets, scripts, etc. If users still can’t see something then provide an alternative page. Check if your website is accessible using

Check if your site is ‘transforming’ i.e. it can handle new technologies and old and doesn’t leave your user just looking at a great white box where some new technology should be impressing them http://www.w3.org/WAI/ER/existingtools.html

Get the BBC to create you a page stripped of your extra tables and layout and see how if it still reads in the order you intended to (http://www.bbc.co.uk/education/betsie/index.html). Provide ways of allowing users to turn off any moving, blinking, auto-updating and scrolling objects or pages

Reading websites

Ensure that any navigation that has buttons or tabs etc, is clearly labelled and can be operated without having the need to use the mouse button. Access keys are one solution where users can type in a letter which corresponds to the required page as it is defined in the HTML code. Sample access keys can be found on any government website.

Screen readers can be found at http://www-3.ibm.com/able/solution_offerings/hpr.html and http://www.w3.org/WAI/References/Browsing. It is worth closing your eyes to listen to what your HTML code says.

Other browsers

Realise that all users may not have a keyboard and mouse or a standard browser try to design for this.

Enable users to ‘tab’ through your interface and then test it http://www.delorie.com/web/lynxview.html.

Tools and methods

The World Wide Web Consortium develops standards and reviews current technology such as HTML, CSS, access keys, etc., and by adopting their conventions you are adopting an international standard. There are many tools and methods which exist and which are simple to use. To find out about usability methodologies look at http://www.usabilitynet.org/tools/list.htm and see if any would be useful.

Extensions for your web development software

If you use web development software such as Macromedia Dreamweaver look for accessible and usable extensions that you can plug-in. Plug-ins highlight when you should be adding tags etc. to your website. http://www.usablenet.com/ writes plugs-in to help with accessibility for Dreamweaver users.