/Access all areas/ Tourdeglobe.net
31/08/2006 | Filed under Develop > Access all areas
When designing your website you should make sure that it’s accessible for everyone. Alastair Campbell shows you how
The site tourdeglobe.net is about one man’s trip around the world on his bike. This visually striking site is entirely graphics based, which means that search engines, as well as visually impaired people, will have difficulty accessing it.
Graphical sites can be accessible though, so there’s no need to compromise on visual effects. What’s more difficult to overcome is the use of text within images. Ideally, text should be coded within the HTML, rather than superimposed on a graphic. This helps people using assistive technologies such as screen readers, and also improves search engine visibility.
To keep the visual appeal of this site, while moving towards accessibility, all images should be given an alternate text description (alt text). Alt text can be included by adding the alt attribute to the image tag:
<img src=”bicycle.gif” alt=”a red bicycle” />
To ensure the graphical navigation works for everyone, the image maps need to have different alt texts, allowing individual links to be identified even by screen readers.
The larger content images could be split into foreground and background images. This would allow the images that are repeated on multiple pages to be treated as background graphics, whilst the foreground images could be coded to include a useful alt text.
Moving the text away from the graphics and into the HTML itself will enable many more people to learn about this global adventure. Using additional structural elements in the HTML, such as headings, will increase the readability of the content, too. The web is a rich and vibrant place and sites such as this are well worth a visit. With a little planning and some redesign work, many more people will be able to experience the tourdeglobe.net website.
About Alastair Campbell
Alastair Campbell is a founding member of Nomensa (www.nomensa.com) and its director of user experience. He has helped British Gas, the AA and DirectGov (to name just a few) assess the levels of accessibility of their websites and implement a successful user experience. To submit your website for an accessibility evaluation, email knowhow@netmag.co.uk
Bookmark with:
Comments
Nick / 06/09/2006 / 15:52 / http://www.tourdeglobe.net
I have added alt tags onto the jpegs on the site,
will that make a difference as it now?
the client Shane wanted the site made out of images,
what more can I do to make it more accessible?
I have meta tags in for search engines.
Alastair Campbell / 11/09/2006 / 10:06 / http://www.nomensa.com
Hi Nick,
At a minimum the 'text' content within the images needs representing, so where at the moment you have things like "introduction to the web site" as the alt text, it should have all the text that is visible via that image, i.e. "Welcome, I am Shane Molley..." etc.
However, that is quite tricky, because as a rule of thumb, browsers only cope with the first 256 characters or so of text, so you might be stretching that limit.
The next step could be separating the repeated side columns into a background image, and having the central image as one or more foreground images with appropriate alternative text.
That would help those using screen readers, text browsers and perhaps mobile devices, and bring the site up to the WCAG's single-A, minimum level of accessibility. However, for people with mild to moderate visual impairments they will not be able to increase the size of the text, because it is in an image.
Improving other aspects would require quite a different approach, using structural HTML (i.e. text and styling rather than images), it sounds like that might take some client persuasion?
Michael / 12/09/2006 / 17:36 / http://www.create4web.co.uk
Hi,
That's not a website, it's a picture. If you are a web designer building this site for a client then it is your responsibility to educate your client on web accessibility and usability. Tell him he can't have it all made out of images and build it properly.
Michael
Matt Williams / 18/09/2006 / 15:46 / http://www.ecru.co.uk
I have yet to meet a client who doesn't understand the value of aiming for at least W3C Priority AA. It's worth having the list of checkpoints on hand (or even better, memorising them) so that when your client asks for something that fundamentally falls foul, you can argue in a non-confrontational, objective way.
Alastair Campbell / 28/09/2006 / 14:06 / http://www.nomensa.com
Whoa there guys!
There are clients, and there are clients. Some may have heard of 'accessibility', or even web standards, but I still come across those who haven't, or haven't been convinced of the relevance yet. Especially clients who aren't in a Government or (big) business organisation.
I occasionally still hear "but none of our clients are blind", at which point you know there is an education process to begin, and it is often best to start with how it affects people, rather than a list of (largely technical) checkpoints.
There are many other reasons not to use a 100% image based site, to do with ease of maintenance and search engines, it might be better to start from there. It really depends on the skill set available and the relationship with the client.
