accessible web design uk

I've read a fair bit about accessible web site design but I thought I'd go and visit a blind friend and find out just what accessibility meant to her.

She introduced me to her screen reader JAWS. It's a great piece of software that helps her navigate web pages and read content to her. Here's a bullet point summary of our meeting:

Interesting Facts about JAWS

1. Her hyperlinks were read out in a female voice so she could distinguish them from normal text.
2. She could tell that my top menu of links was a menu easily because I'd used UL and LI tags to create my menus.
3. To navigate through tables, links, images and menus the tab button is used.
4. Each time tab is press the software speaks the next word that it finds.
5. The software also tabs through every image on the page and attempts to read the ALT and LONGDESC tags.
6. To ensure the screen reader allows the user to complete web based forms it enters something called forms mode where the tab is used to navigate the form - however in this mode certain form elements are hard to read - including drop down boxes (select tags).

accessible web site design do's

1. Do put the text only or low graphics link at the top left of the page so the user doesn't have to tab through the whole page to find the link.
2. Do use a linear layout for your page - preferably using a table free design.
3. Do use list tags for your menu creation. JAWS lets the user know when it arrives at a list, how many items in the list, and all of the names of the list items so it is easily identifiable as a menu.
4. Do introduce the accesskey attribute into your pages. It allows the user to quickly focus on the important content on your page i.e. accesskey to the main content so the user doesn't have to tab through the header and menu each time they revisit your web site. The radio 4 web site handles this well apparently.
5. Do add the label and name attribute to the relevant form tags. This makes form completion a lot easier!
6. Do add the alt and longdesc tag to all images. She said that she especially likes it when sites add a longdesc like “Frozen Interactive header image - a green frog on a black background" because it added a bit more visual description to the site (although I've heard some accessibility speakers teach that this is bad practice).
7. Do try and avoid having an automatic refresh on your web page - or if you must have one make it clear to the user so that JAWS can disable it. There's nothing more annoying that reading half a page in JAWS and have it refresh automatically and have to tab through all the content you have already read.

accessible web design uk don'ts

1. Don't add "Go" image buttons to form. Ensure that a form can always be submitted by pressing enter.
2. Don't add unnecessary drop down boxes to your form (this is a difficult one!).
3. Don't ever add blank spacer images. Each image is read by the reader (either the alt tag or longdesc or the filename if neither tag is added to the code) and it's very irritating to hear the word spacer read by the read 50 times before you get to some content.
4. Don't ever add a hyperlink with the words "read more" - or if you really must add the link ensure that the alt tag reads "read more about combine harvesters" (or a more relevant description).