 |
 |
|
Creating Accessible Websites
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
browsers, 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. Here's an example:
<a href="home.html" accesskey="h">Homepage</a>
<a href="about.html" accesskey="a">About Us</a>
<a href="search.html" accesskey="s">Search Page</a>
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.
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.
|
