Article printed from SiteProNews: http://www.sitepronews.com
  HTML version available at: http://www.sitepronews.com/archives.html

  
  
  
Creating Accessible Websites
By Bethany Antonio

An accessible website is one that allows people with visual, 
aural, or physical disabilities full access to the information 
and services available in the same way as able-bodied people.

Is It Worth The Effort?
In the United States around 53 million people have some form of 
disability with two-thirds of those having a severe disability. 
About 1 in 10 men are fully or partially colour blind.

You probably already spend much time and effort ensuring your 
website displays perfectly in a broad range of browers, you 
probably spend time ensuring your colour scheme and images look 
great in a range of display resolutions and how many hours do 
you put in ensuring your website is indexed by all the major 
search engines?

So with all this effort, why do so many web designers ignore 
the needs of those who may have difficulty using a mouse or may 
suffer from one of the many visual disorders? The answer is that 
building an accessible website is considered to be difficult, 
time-consuming and simply not worth the effort. This is not true, 
creating an accessible website is relatively easy and will allow 
a greater number of people access to your website.

Simple Ways To Improve Your Website Accessibility
These are some simple steps you can implement today to improve 
the accessibility of your website.

Colour And Contrast
Many people need extreme contrast between the text and 
background colour in order to be able to read your text. If 
your text is dark blue, avoid using a light blue background 
colour.

Using colour to convey information or request an action from 
the user should also be avoided, for example telling someone to 
'click the red button to continue' is not much help to a person 
who cannot distinguish red colours. It seems obvious, but it's 
overlooked on many thousands of websites.

Font Sizes
Font sizes should be relative rather than absolute. Absolute 
font sizes, those measured in points or pixels should be avoided 
as they prevent the visitor from resizing text. If someone cannot 
read your page they are simply going to leave.

Relative font sizes allow your visitors to display the text on 
your website in a size that suits them best. These font sizes 
can be specified as a percentage, for example the base font for 
a web page may be 100%, headers could be 120% and so on.

Images
All images on your website should be accompanied with additional 
text information describing what the image contains. You do this 
with the alt attribute of the img tag. For example...

<img src="button1.gif" alt="Click to proceed to shopping cart">

You should avoid the use of transparent images spacer images for 
formatting. You can achieve the same layout precision by using 
cascading style sheets (CSS). Do a quick search for 'style 
sheets' for a wealth of information and tutorials.

Using Tables For Layout
Almost all websites use tables to a layout a page. Tables are 
easy to understand and achieve the desired layout quickly and 
easily. However, you should avoid them as a layout tool as much 
as possible.

Tables can cause the size of your pages to increase dramatically 
slowing download times, they often require the use of transparent 
images to achieve the proper layout and they make it extremely 
difficult for screen readers to convey the information on a page 
correctly to their users. Screen readers are programs which read 
out the information on a webpage to someone who cannot see that 
information for themselves.

Rather than using tables to format your pages you should start 
using CSS-based layouts. CSS offers you greater precision when 
laying out your pages, decreases the amount of HTML required for 
formatting and makes it much easier for screen readers to 
interpret your pages correctly.

Access Keys
Access keys are basically keyboard shortcuts that are primarily 
designed to help those people who have difficulty using a mouse.

You can assign an access key to several HTML elements, however 
the first one you should consider is the anchor element (a). 
Here's and example:

Homepage
About Us
Search Page

Now when a Windows user visits your website they can access 
the home page by pressing ALT + h, the about page by pressing 
ALT + a and the search page by pressing ALT + s. This simple 
feature can dramatically improve the usability of your website 
for people with limited mobility.

Provide A Text Only Version
A text-only version of your website can help users with visual 
disabilities. However, unless your content is stored in a 
database, creating a text only version doubles your workload 
and makes it more difficult to update your content.

This is where the Betsie parser is useful. Betsie, developed for 
the BBC website is a PERL script which produces a simplified text 
only version of a web page that allows text-to-speech converters 
and screen readers to correctly read out the contents of the 
page. Betsie also allows those with visual impairments to read 
computer screens easier. Find out more about Betsie.
(http://www.bbc.co.uk/education/betsie/index.html)

In Summary
Of course, there are many more enhancements you can make to your 
website to ensure it is truly accessible, but implementing these 
simple steps will start you on your way in no time. An accessible 
website with good navigation, less HTML and a consistent, logical 
structure will not only benefit those with a  visual, aural, or 
physical disabilility but will also help your content to be more 
easily indexed by search engines.

================================================================
Bethany Antonio is the web designer for UK Sprite Search 
(http://www.uksprite.com), a British based search engine which 
offers an alternative to pay-per-click.
================================================================

Copyright © 2005 Jayde Online, Inc.  All Rights Reserved.

SiteProNews is a registered service mark of Jayde Online, Inc.