Advice for web developers

Web accessibility is all about following design standards and then adding in a few simple accessibility features. Read below to find out more.

Tips for improving the accessibility of your site

With assistive technology such as screen readers relying on recognising the HTML used, the key to creating accessible websites is to use valid HTML.

This makes your website easier to manage. Accessible websites split the content and layout of each page using Cascading Style Sheets (CSS). The CSS file covers the layout for the site, so to alter the look of the whole site only one file needs to be modified.

The website will also appear higher in search engines. They cannot usually understand images, audio and video content. By providing alternative content to each of these, all areas of your website will be accessible to search engines.

Users should be left free to change the text size and colours in their browser, so do not lock these settings. Associate text descriptions to images and animations so that screen readers can convert the text.

Don't use colour as the only means of providing a piece of information.

Keep layout consistent around the site to aid in navigation.

Include a transcript of audio tracks containing speech and a description for other audio tracks such as sounds or music, for deaf and hard of hearing users.

Ensure those not using a mouse can navigate easily using the TAB and Enter keys.

Improve the readability of your site

Producing an accessible website is not just about the coding of the web pages. The content and the way it is presented on the screen can make a big difference.

Reading tends to be slower from a screen than from printed text. Keeping sentence and paragraph lengths short improves readability for all.

With any website users will be of different backgrounds and abilities, so keeping the language used for your content as simple as possible is good practice.

If you run a website, information about getting it enabled for Browsealoud users can be found on the Browsealoud website.

Writing styles

The British Dyslexia Association suggests the following:

  • Write in short simple sentences
  • Be conscious of where sentences begin on the page. Starting a new sentence at the end of a line makes it harder to follow
  • Try to call the readers "you"; imagine they are sitting opposite you and you are talking to them directly
  • Give instructions clearly
  • Avoid long sentences of explanation

The Plain English Campaign advises:

  • Stop and think before you start writing
  • Be clear what it is you want to say
  • Use short words where possible
  • Keep your sentence length down to an average of 15 to 20 words
  • Use active verbs as much as possible
  • Say "we will do it" rather than "it will be done by us"
  • Be concise

Even quite complex information can be written simply. In the aerospace industry, ASD Simplified English was developed to write maintenance manuals for workers for whom English was not their first language.

ASD Simplified English has a set of writing rules and a dictionary of words and their meanings. It has:

  • A limited number of words
  • A limited number of clearly defined meanings for each word
  • A limited number of parts of speech for each word
  • A set of rules for writing text

Improve the presentation of your site

The way you present your information can also have a big impact on the readability.

Fonts - On a screen, a non-serif font such as Arial, Verdana or Tahoma is easier to read

On a printed page the Royal National Institute for the Blind (RNIB) recommend using at least size 12pt, but if you allow users to change the text sizes on browsers they can set it to any size they wish

Text case - Use lower case where possible as it is easier to spot word shapes, making your content easier to read

Lines - Try to make lines 10-12 words long as readers can lose their way with a longer line length. Keep lines left justified but with a ragged right edge

Paragraphs - Break up blocks of text by leaving lines between paragraphs as white space helps web display. Keep paragraphs short as this helps to refresh the eye. Vary paragraph lengths. This is so that the eye can easily take in the point and can orientate on a scrolling page.

Bullet points and numbered lists. - Bulleted lists help clarity on a screen and break up the page. Nested lists can convey information quickly. Make sure it is possible for users to specify their own font style and size as well as background and text colours

Safe Web Colours for colour-deficient vision

Colour is increasingly used these days to help convey information. When one in 12 men have some measurable degree of colour vision deficiency, the use of certain colours in certain ways can cause difficulty when navigating web pages or software, and even total illegibility in some cases.

The key issue is to know when you are using colours which some people will not be able to differentiate between - because that (for them) removes the benefit of using colour for visual cues. Colour scientists have long known which colours are confused by colour blind people, but this tends to be expressed in a way difficult for designers to utilise.

This site contains information and design tools. They may not show you exactly what dichromats see, but will help you to understand which colours are easily confused. This can help you to ensure that important colour cues are not lost.

Background - a short background of colour vision deficiency (10.6k of images), common terms used here, and a brief explanation.

References - for a list of places I've found interesting and/or useful during the information-gathering stage.

Related sites - links to related tools developed by other people.

Palette files

Transforming

Colour choice - these pages comprise the toolset.

Colour lists