CP 3 Structure and style to maximise readability and scanning

Recommendations

• Structure using short descriptive headings and sub-headings:
  
  • Always have a main title;
  • Try to avoid skipping levels.
• Provide a short summary - particularly for longer pages:
  • 50 words or fewer directly under the main heading.
• For long pages provide a 'table of contents' at the top of the page;
  • Link each item in the contents list to the sub-heading to which it refers.
• Prioritise the most important information:
  • Place important items high in the page (so that they will appear above the 'fold') to minimise the need for scrolling:
    • Screen readers users will also be presented with this information earlier;
  • Put the most important information first in links, titles and phrases:
    • This will emphasise the uniqueness of the item and aid quick comprehension.
• Enhance content for scanning:
  • Use short paragraphs and sentences;
  • Use lists instead of long, comma, separated sentences;
  • Add relevant tables and diagrams to break up 'walls of text'.
• Style for readability:
  • Left align all body text:
    • Do not right, centre or justify - this makes it hard to read, especially for some people with reading difficulties such as dyslexia;
  • Use bold and italic sparingly:
    • Highlight key words and key phrases,
    • Do not bold or italicise whole paragraphs,
    • NB: the system that you use to publish content should style these using special tags called <strong> (usually bold) and <em> (usually italic);
  • Avoid fancy fonts:
    • Verdana and Arial are almost universally available and they are good for online reading;
  • Avoid ALL CAPS and blinking text;
  • Do not use underline:
    • this should be reserved for links only.
• Be careful with colour:
  • Do not impart information using colour alone:
    • Add another cue to the important information (e.g. text in a bracket - see examples);
  • Avoid red/green combinations (in images and text) as these can be difficult to see by people who are colour blind;
  • If you are selecting background and foreground colour combinations, make sure they have high contrast and can be easily read.

Examples