How to make your website Disability Discrimination Act compliant

The Disability Discrimination Act requires you to ensure your services are accessible to people with disabilities


It makes good commercial sense too. The Disability Rights Commission estimates people with a disability spend £50bn in the UK each year. In most instances, making your website accessible simply requires common sense.

Jules Taplin, technical director at web build, design and management business Intercea, highlights key areas to increase the accessibility of your web content:

Alternative text 

Alternative text (alt) appears when you position your mouse pointer over an image. Visitors with sight disabilities may be using screen-reading equipment, which sends text displayed on the screen to be spoken by a speech synthesizer or reproduced in Braille. They will rely on the alt text to convey the same amount of information as the image itself. The use of alt text on all images is one of the Web Accessibility Initiative (WAI) Priority 1 checkpoints and is required for Bobby – the online quality and accessibility tool – status.

The alt text should be:

… A description of photographs, figures and pictures. This should be brief and not exceed more than 20 words

… An exact wording or summary of text images

… An asterisk or empty quotation marks on images that have no content value such as dots and dashed lines

Page structure

A screen-reader is able to use the HTML tags on a web page to work out the structure of the page and therefore it is necessary to always correctly label headers, paragraphs, data tables, etc. Images can also be used as headers and labelled with header tags so that they are read as such. Additionally, you can specify your own styles for tags in your Cascading Style Sheet (CSS).

Use of colour

Use colours liberally to distinguish between sections, types of content, text and background and to mark links already visited. However, it is important to remember that part of your audience is colour-blind and you should not rely solely on colour.

Fonts

Small font sizes are perfectly acceptable as long you make bigger alternatives available. Browsers have font size controls and using relative font sizes permits the user to adjust to their own comfort. Non-standard fonts should be avoided.

Navigation ‘more’ links

A ‘more >>’ link at the end of an item is unhelpful when read by a screen-reader; it gives no indication where the link takes the user and symbols such as >> have no meaning. It is much better to word the link ‘more about’ plus the title or name.

The ‘title’ attribute

Additional information about a text link can be provided through the ‘title’ attribute case where it is not clear where a link will take you. The text appears, as alt text does, when you place your mouse pointer over the link.

Skip to content

Users’ eyes will skip straight to the content when browsing, turning to the navigation when they want to move to a new page. Generally page navigation is laid out at the top and/or on the left with the result that a screen-reader would read all the navigation items before reaching the content. To assist this, an anchor can be positioned at the start of the content and an image at the beginning of the page linked to this place. The alt text should be something like ‘skip to content’ so that users know to follow the link.

Limited mouse control 

There has been a concentration so far on users with sight disabilities, but also try and consider someone who has limited control of the mouse. To assist these users, you can ensure that the clickable area of any image or text link is large enough that it can easily be located.

Comments

(will not be published)