2.4 Accessibility - fonts, colours, graphics and audio

Careful use of fonts, colours and graphics is very important, particularly to make your site accessible to people with visual problems.

The Royal National Institute for the Blind (RNIB) has a Web access centre (http://www.rnib.org.uk/xpedio/groups/public/documents/code/public_rnib008789.hcsp) [Opens in new browser window].

Use fonts (size and colour) that can be easily read, and / or changed by the user as required.

• Do not specify particular fonts or typefaces, or if you do, provide options for alternatives to be used.
  
  
• If you specify fonts, only use a few different fonts, for example common ones, sans serif, standard (medium) size.
  
  
• Ensure the site will work at different screen resolutions.
  
  
• Don’t use light text on dark backgrounds; it causes printing problems.
  
  
• Use single, solid background colours. Avoid background images, patterns or textures.
  
  
• Underlined text means a hypertext link. If you want to emphasise a piece of normal text use bold.
  
  
• Sections of text completely in upper case or italics can be difficult to read.
  
  
• Use only a few colours that go well together.
  
  
• Avoid colour combinations that cause problems for people with colour-blindness (red / green, yellow / blue) or dyslexia.
  
  
• Avoid colour combinations where the contrast between the colours is low - look at the colours in grey scale to see how they will appear.

Navigation around the site is vital.

• Don’t use graphics or active content for navigation.
  
  
• Avoid drop-down menus and pop-up windows. If you use them, provide an alternative.
  
  
• Use the same methods of navigation throughout your site.

Be sparing in your use of graphics and only use them if you have a good reason:

• If you use graphics to convey important content always provide a text alternative.
  
  
• Use alt-tags with all images or graphics:
  (a) Alt-tags (alternative text attribute (ALT text)) are shown in place of images in text or text reader browsers. They also appear in some browsers when the cursor rests on an icon or image on the screen;
  (b) make sure they briefly but clearly describe what the image or icon is.
  
  
• If you provide moving graphics keep them in a separate section of the site, clearly labelled as such

You should also consider the needs of people with hearing problems if you include audio material on your site. Provide transcripts or captions.

< previous page: accessibility intro  |   next page: accessibility - technology >

© Copyright for this site is held by Contact a Family and the School of Computing, Engineering and Information Sciences, Northumbria University. Site published February 2003. Last updated September 2008. Review date September 2009.