Date: Saturday, March 24, 2007
Website design for the visually impaired
It is possible to find just about anything on the Internet. Most people take it for granted as a tool for finding out information or a time-passing activity, but there a many people who find navigating the World Wide Web difficult.
Millions of people who use the Internet have some form of disability. These include hearing impairments, physical disabilities, neurological disorders and age related conditions.
Of course, disabilities affect Internet use and the most common are visual disabilities.
Vision impairments can cause a variety of problems with viewing websites. So, as a web designer, it’s important to understand them and to build websites with the needs of the blind or partially sighted people in mind.
The law demands that companies produce information in an accessible format in accordance with the Disability Discrimination Act (1995). This has implications for websites, which good practice suggests should be designed in such a way as not to discriminate against any disabilities.
Free online software and initiatives by Bobby (http://webxact.watchfire.com) and WAI (http://www.w3.org/WAI) have helped to monitor website design, whilst articles and support from the RNIB and W3C (www.w3.org) give guidance and support to designers who need to further educate themselves in accessible website design.
Blindness and partial blindness
It is a misconception that a blind person cannot use the Internet.
Blindness not only covers full sight loss in both eyes, but partial loss of vision in one or both eyes and incorrectible vision in one or both eyes.
People with these conditions will find it difficult to view any website.
Low vision impairment
Low vision impairment can affect a variety of people. The young and the old are usually the most common candidates for this condition, as the eyes are still developing at a young age and can deteriorate at an older age.
People with low vision impairment often find small text difficult to read, low contrasting colours hard to distinguish and may struggle to read and understand ‘fancy’ or ‘complex’ fonts, such as novelty fonts or type that has varied heights, styles or serifs.
Colour blindness
Colour blindness is the most common visual disability. It is a condition that makes it difficult to distinguish between certain colours. The most common colours that this form of blindness affects are red and green.
Once you understand the needs of visually impaired audiences, you can start to think of ways to build websites that reduce the impact the impairments may cause.
It is important to attain a high standard of design and development for website design and even more important to implement the following rules when designing for the visually impaired.
CSS website design
It is important to have a text-based website. If you need to use images and other media, use Cascading Style Sheets (CSS) to implement the effects.
Good website designers should be able to remove a style sheet and see nothing but good quality text that is ordered in an expectant flow, broken into segments using horizontal rules.
CSS is also good for text web browsers. Unlike Microsoft® Internet Explorer and Mozilla® Firefox, text web browsers only show text and disregard images, audio, Flash and any other non-text media. This enhances the text for screen-reading software, an essential requirement for people with visual disabilities.
Use of colours
When designing for the Internet, there is a selection of colours called web safe colours that should be used. This ensures that the screen that the website is viewed on reproduces the hues and tones as accurately as possible.
It is, however, now standard practice for designers to think about visual disabilities:
- When designing, do not use low contrasting colours; black on purple is low contrasting and difficult to view correctly. Red on white or black on white is the highest contrast, making it easier to view.
- Do not put two low contrast colours adjacent to each other. A red stripe beside a green stripe is too much of a blur for the eyes and would impact anything in front of these colours.
Fonts are another design aspect that have been considered for years. Fonts need to be considered when designing because:
a) Not many fonts are web compatible – this means that few computer systems have the same fonts
b) Unusual fonts are difficult to read and need to be generated using images, which is poor design practice for web accessibility standards
Example of fonts that have been used on the Internet include:
- Arial (sans serif)
- Times New Roman (serif)
- Comic Sans (cursive)
- Courier (monospace)
Using a separate style sheet for print is another good idea. Changing fonts to a serif (e.g. Times New Roman) will be better for reading after printing.
There are, however, other ways to achieve different fonts.
Images, such as .gif or .jpg can be created to make text for a website. This means that any font the designer has, the user can read within the image even if they don’t have that font installed on their own computer.
It is important to remember that some browsers may not view images (such as text web browsers) and many people with visual disabilities may find it difficult to read the fonts that have been added to an image.
Images should rarely be used for text, as it increases the document size (images are usually larger than standard HTML text) and text within images cannot be selected like HTML text.
Image hyperlinks are also harder to distinguish, as they often do not have a state that changes when the mouse rolls over the image (see Hyperlinks – Hover, below).
Hyperlinks
Good website design practice dictates that hyperlinks (text links within a HTML document) must have the following states:
- Link – the link state is how the hyperlink appears before it has been clicked. This state is commonly blue and underlined.
- Visited – the visited state ensures that the user knows they have been through the link before. It is usually purple and underlined.
- Hover – this state is the change that occurs when a user rolls over a hyperlink. It is usually red and has no underline.
- Active – a state that is rarely used, but is good practice, is the active state. It shows that the hyperlink has just been clicked and is in the process of redirecting the page to the URL attached to the hyperlink. This is usually blue and has no underline. Some browsers surround the active hyperlink with a dotted line for added enhancement.
In order for a design to be successful for people with visual impairment, a designer must use the above features to enhance the design and produce a highly accessible website.
For further support about accessible website design and development, visit: www.w3.org/WAI.
Information about visual impairments and designing on the Internet can be found at: this website address.
This article is the intellectual property of Pan European Consulting Limited and any unauthorised reprinting or publishing on other websites is an infringement of copyright.