Play my last.fm radio

What's it like outside?

Web design tutorials

What is accessibility?

Accessibility means more than just making a website easy to use and navigate. It should be fundamentally well written, and attention to detail should be exercised, so that everyone who passes through can have an irritation-free experience.

A snappy description

Accessibility is about making your website as usable as possible for as many people as possible. This includes people who use page readers, which speak out the text on the page, due to visual disability or even just preference. Links should be clear, important links and information should be stated more than once on a page, etc. There's nothing more frustrating (yes, that's an exaggeration) than arriving at a website and hitting a brick wall as you try to work out where to go next.

Some of you will be asking what the point of making something accessible is, as your website "already works fine". You know who you are. Here are some questions that you need to ask yourself.

1. Power to the people

Have you ever asked several different people to use your website, and watched them do it? This is a great way of seeing if your website is easy to use. Ask a few people of differing computer literacy to find a piece of information on your website, and see how they get on. It may be obvious to you where everything is, but you created it. Everyone can learn from this method, as it exposes the stuff which doesn't make sense to the average person. Yes, they may just be stupid, but do you really want to make your website unusable to the stupid market? That's a large percentage of the world removed.

2. Don't keep making no sense

It is considered "cool" these days to use words that aren't familiar with the navigation of a website. The theory, I suppose, is that people don't know what it is so they click on it. Or, as is typically the case, they ignore it altogether. For example, I could have called my "photography" section something like "shots", but that could mean anything. So I didn't.

3. Give your page good titles

Not only will effective titling of your pages give you good leverage in Google, it will also make your site easier to use. Again, page titles are susceptible to "cool speak", or an unchanging message such as the name of the website. You're only hurting yourself with this method, as search engines put a big emphasis on page titles. Make the page title unique and descriptive. Also, people with page readers will love you for it.

4. Help!

People need help. Fact. So give it to them - provide little info boxes on location rather than on a seperate help page, describing things which may not be obvious to everyone. You can also incorporate Javascript popups which will do this on click or hover, such as this one. This is particularly useful in situations such as filling out forms. I would recommend against putting the information text within the HTML and using CSS to hide and display accordingly, because non-CSS users will get all of it, and it may not make sense in that context.

5. Go back to basics

What does your website look like without the CSS applied? Oh, I'm assuming that you're using CSS. If not, do. And then see what your site looks like without it. The browser will display your website in pure HTML format. This is useful for seeing what page readers will see, and whether your website makes semantic sense.

Have you used tables for building your design? This will show up in the pure HTML version, and it won't make sense. Does your page have a top header that describes where you are? You may have a whole bunch of images that form a pretty banner with CSS but that won't exist in the HTML. Place a header in the HTML and hide it using CSS. This method also applies to all aspects of the page. Read the pure HTML version of your page, and see if you still understand it.

6. Colour your links

Web designers like to give links different colours from the standard blue, which is fine, but don't forget to make them a very different colour from the normal text. Also, it's generally a bad idea to remove the underline from links, as that's one of the main distinguishing features of a link over some text. You can remove the underline on hover:

Also don't make a:link and a:visited the same colour. People don't want to go around in circles, so you should show where they've already been.

Conclusion

That will do. The principles are there: when you design a website, think about everyone who's going to use it. Don't cut corners, the detail that you put in will be appreciated.

« Back: tutorials

Jon Cairns © 2008