Designing for accessibility
Key points
The main points of the Web Accessibility Initiative guidelines include:
- providing equivalent alternatives to sound and visual content
- not relying on colour alone
- making sure that pages featuring new technologies also work well with older browsers
- making documents clear and simple
Web designers and others will find a detailed explanation of these and other relevant points at the “Introduction to The Guideline Set” provided by the World Wide Web Consortium (W3C).
Simple techniques for accessibility
Colour
You need to consider two main issues about colours, web pages and people with a disability.
- Do not rely on colour alone to convey information. Certain visual disabilities affect colour comprehension as well as general sight. So if you use different colours alone on a pie chart, you may leave many of your users unable to access information. Instead, use colours and data labels.
- The default colour contrast in most applications is black and white – black text on a white background. This strong colour contrast allows for general ease of reading. Once again, some visual disabilities affect colour comprehension as well as general sight, so be sure to choose foreground and background colours with a strong contrast. The most common form of colour blindness is red/green, so you should avoid these colours as contrasts.
Fonts and text size
The text in your web page is probably the reason why users visit your web site. So it is important to make the information accessible. There are two main issues with text and fonts.
- Avoid using fixed font types and sizes. Use styles which allow browsers and other tools to change sizes easily.
- With dynamic fonts or text, make sure that the user can pause or stop text that is moving, blinking, or scrolling. Some people with cognitive or visual disabilities cannot read moving text. Movement can also cause such a distraction that the rest of the page becomes unreadable. Screen readers are not usually able to read moving text, and people with physical disabilities might not be able to move quickly or accurately enough.
Screen refresh
Some people with a physical or visual disability may take longer to read and to navigate your site. Pages that use an auto-update or auto-refresh are likely to be unsettling and may make the web site inaccessible. Let users control the updating or refreshing themselves.
Graphics
When a screen reader comes across a graphic in a web page, it has no idea what the graphic is unless specific information is given. You can provide that information in the form of an ‘alt attribute’ – a way of attaching descriptive words to the graphic.
Every graphic on the page should have this, so that web site visitors who cannot see images get a good idea of what is on your page. Browsers which cannot show images may be able to display the description instead.
Advantages of using CSS for design
A cascading style sheets (CSS) file is attached to a web page and acts like a template or set of rules defining how the web page is presented. Web designers can use style sheets to tailor the presentation of their documents to visual browsers, printers, hearing devices, Braille devices and hand held devices.
CSS helps to separate content and structure from presentation and layout. This helps web designers to create documents that load faster and are easier to maintain and update.
Content can be changed independently of formatting, because presentation and layout are handled in CSS. This means you can also change presentation and layout on hundreds or even thousands of pages at once, by changing the external style sheet to which those pages are linked.
The important benefits for accessibility include offering users a choice of style without having to modify the source document. They can easily check that the source documents work with assistive technology (any device to help with functions a disabled person may find difficult) before applying the style.
Alternate style sheets
Not every visually-impaired visitor to your web site will need a screen reader. They may be able to read the text more clearly by increasing the font size or switching to a high contrast colour scheme.
By using alternate style sheets, you can let users choose a high-contrast large text version of your web pages.
