DEV 7.5 – Prioritise information, maximise readability and scanning

Why is this important?

Techniques

Help users understand how appropriate the content is for them

• Provide a short summary introduction - 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 heading to which it refers;
  • Ensure the link text matches the text of the heading that it links to.

Prioritise the most important information

• Use the inverted pyramid approach to structuring your content:
  • Start with the conclusion;
  • Then following with the detail;
  • Add the background and any minor details towards the end.
• Place important items high in the page to minimise the need for scrolling:
  • This will ensure that screen readers users will be presented with this information early on;
  • This will minimise the amount of scrolling users on mobile devices have to do.
• Put the most important information first in links, titles and phrases:
  • This will emphasise the uniqueness of the item and aid quick comprehension;
  • Screen reader users, navigating by headings or links, will benefit from being able to identify the purpose of a section quickly.

Use short paragraphs and sentences

• If you are adapting existing content for digital use, break up larger paragraphs into smaller ones.
  • Try to keep sentences below 21 words
  • Try to keep paragraphs below 65 words
• Use lists instead of long, comma-separated sentences;
  • Always use the available list functionality, rather than using hyphens or asterisks to simulate lists;
• If appropriate, add relevant tables and diagrams to break up large 'walls of text'.

Use the most appropriate list type – ordered, unordered or definition list

• Use <ul> for unordered lists – these are simple, non-hierarchical lists of items with a bullet point at the front of each line, like this text you are reading now;
• Use <ol> for ordered lists – these are lists with a hierarchy. By default they will have a number in front of them but these can use numbers, letters or roman numerals;
• Use <dl> for definitions. A <dl> has two elements which are used in pairs:
  • <dt> is a definition term;
  • <dd> is the definition of that term

Use images to engage your users

• Choose relevant and appropriate images – they must support your content;
• Use high quality images – if it is a photo, ensure it is in focus, well balanced in light and colour and has good composition.
• Follow the guidelines set out in DEV 3.1.1 – All images must have a text equivalent (“Alt text”)

Use the inverted pyramid style of writing

The conclusion of the article is in the main heading of the page; the core detail is in the first sentence; the background follows after.

Break up content with lists

Table 1 - Use lists instead of long, comma-separated sentences

Code example of a nested list

How this list appears in the browser

Items needed for holiday:

1. Sunglasses
2. Swimming things
   • Swimsuit
   • Towel
3. Sun cream
4. Money

References

WCAG 2.1

• 1.3.1 Info and Relationships (A)

EN 301 549 v 2.1.2

• 9.1.3.1 Info and Relationships

Further reading

• Accessibility according to actual people with disabilities