DEV 7.5 – Prioritise information, maximise readability and scanning
Why is this important?
Make it as easy as possible for users to get an impression of the nature of your content and find specific sections quickly.
Users read and interact with digital content in a very different way to printed material. Digital content should be presented in a way that allows users to rapidly absorb and understand the information you are communicating.
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
Do not write… | Do write… |
We provide the following services: window cleaning, rubbish removal, vacuuming, dog walking. | Our services:
|
Code example of a nested list
<p>Items needed for holiday:</p>
<ol>
<li>Sunglasses</li>
<li>Swimming things
<ul>
<li>Swimsuit</li>
<li>Towel</li>
</ul>
</li> <!-- note the placement -->
<li>Suncream</li>
<li>Money</li>
</ol>
How this list appears in the browser
Items needed for holiday:
- Sunglasses
- Swimming things
- Swimsuit
- Towel
- Sun cream
- Money
References
WCAG 2.1
EN 301 549 v 2.1.2
- 9.1.3.1 Info and Relationships