DES 3.2 - Prioritise information, maximise readability and scanning
Make it as easy as possible for people to get an impression of what's on offer and find the specific piece of information quickly.
- Prioritise the most important information:
- Place important items high in the page (above the 'fold') to minimise the need for scrolling:
- Screen reader users will also be presented with this information earlier;
- Put the most important information first in links, titles, phrases:
- This will emphasise the uniqueness of the item and aid quick comprehension.
- Place important items high in the page (above the 'fold') to minimise the need for scrolling:
- Enhance content for scanning:
- Structure using short descriptive headings and sub-headings,
- Communicate the structure visually e.g. larger to smaller as you go down the levels of subheadings
- Ensure the developer knows the levels as they should code these using special tags (h1, h2, h3 etc,)
- Try to avoid skipping levels;
- Use good chunking and spacing to create 'conceptual units' of related content;
- Use short paragraphs and sentences;
- Use lists instead of long, comma, separated- sentences;
- Add relevant tables and diagrams to break up 'walls of text'.
- Structure using short descriptive headings and sub-headings,
- 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 like dyslexia;
- Use bold and italic sparingly:
- Highlight key words and key phrases
- Do not bold or italicise whole paragraphs;
- Avoid fancy fonts:
- Verdana and Arial are almost universally available, and they are good for online reading;
- Avoid ALL CAPS, blinking text;
- Do not use underline for anything other than links.
- Left align all body text:
- Do not use ascii art:
- If for this cannot be avoided provide a description of it and a link to bypass it:
- Otherwise screen reader users will be presented with a jumble of incomprehensible characters.
- If for this cannot be avoided provide a description of it and a link to bypass it: