Please enjoy an article by a guest author, Joe Dolson, an accessible websites designer.
The transformation of a website from a snake-infested inaccessible maze into a beautiful, airy reading room can include a huge variety of design changes from the barely noticeable to the fundamentally transforming. Making that first step into the maze requires you to balance a number of different issues:
- How long will this change take?
- How much will this change help my visitors?
- What is a simple change I can make to help my visitors right now?
Obviously, transforming your site completely doesn't happen overnight. If you have a labyrinthine navigational structure with a monstrously complex table-ridden codebase then you have a lot of work to do.
However, there are usually steps you can take right away which will simply make your site easier to use, regardless of the base html code. Here, I'm providing a short list of useful accessibility changes you can make. They get harder as they go along!
First steps first - let's fix those images. Just adding
alt attributes can make a world of difference - but think carefully about how they should be used. The principle behind an
alt attribute is that it should be presented to the user when the image is not available.
It should be a concise description of the picture. It should be something which would make sense when that image is not present. It should not distract the user from what's important on the page. Those spacer gifs? Give them an empty attribute:
alt="". A quick checklist:
- If an image contains text, use that text for the alternate text.
- If an image is merely decorative, leave the alternate text blank.
- If the image is complex, like a graph, provide a full description of the image in the text of the page, or use the
Add skip links
One of the biggest problems your visually impaired visitors or mobile visitors might find themselves dealing with is a long, tedious navigation system they need to scroll through or listen to in order to get what they want - your content. An easy way to save them this trouble is to provide, at the top of your code, a set of skip links.
What do they do? Merely provide a way to jump past the menu and get straight to the main course. They'll look like this:
<a href="#content">Skip Navigation</a>. All you need to do is add this at the very beginning of your code and provide either a named anchor or an id at the beginning of your content and you've bypassed one hurdle. If you want more information about creating skip links, you may want to read Designing with Accessibility in Mind, at Cre8asiteForums.
Provide focus for keyboard navigation of links and forms.
Everybody seems to know about the most basic pseudo-class for links:
a:hover. (If you're not providing a unique state for your links when a user's mouse is over them, you better get on that now. Go on - get to it.) However, the other pseudo-classes are much less used, though equally important. These are
:Focus provides the look for a link when a user has navigated to it using the keyboard. Letting users who are unable to use a mouse know where they are is a critical element for accessibility. (A word to the wise - although :active is technically a different state, Internet Explorer 6 uses :active to apply styling instead of :focus, so you should always set both.) Setting the :visited pseudo-class will give your users information about where they've been - always a useful piece of information.
Use meaningful text for your links.
Yes, I know that it's easy to write this sentence:
Click here to read more about my life as an astronaut!
But, really, you shouldn't. So rewrite it. Why? Because screen readers have this lovely feature which allows users to jump from link to link and have just the link text read to them. If what they hear is "Click Here," they will be very frustrated — they may have already read your content, and just want to find a particular link. Instead, they need to listen to the whole 10 minute diatribe again.
Give them better link text - wrap your link around "Read more about my life as an astronaut," or even just "my life as an astronaut." It won't be wasted effort - search engines will also very much appreciate those extra clues to what your pages are about.
Think about color
Well, of course you're thinking about color. You're a web designer - you do graphic design for a living! Do I think you're not considering color? No. But I suspect you're not thinking about it in quite the same way I do.
When I think about color, I'm thinking about whether or not I'm requiring somebody to see colors in order to take action. For example, writing this sentence as instructions for a form:
Red asterisks (*) are required fields. Green asterisks (*) are optional.
If you're color blind, you're probably stuck at this point. You'll be filling in every field — even if it's irrelevant — because you can't distinguish red from green.
There are other issues, as well. Both very high contrasts and very low contrasts have their own risks. You need to balance your color choices carefully. People with dyslexia may suffer from sensitivity to high color contrasts (as may many others). The elderly or others with visual impairments may be unable to distinguish colors which are too similar.
Get a wide range of opinions on any color contrasts you're using - checking them with a tool such as Mel Pedley's color contrast analyzer, which warns about too high contrast settings as well as those which are too low can be useful.
This isn't going to give you that wonderful, relaxing reading room I talked about up above. But a lot of these things can be easily incorporated directly into your existing design - you don't necessarily need to start over or rebuild completely in order to create a better experience for your users. Moving forward one step at a time will still make the web a better place.