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

Use the inverted pyramid style of writing

A news article with the heading, "Isle of Wight ferry captain and mate suspended". The first sentence reads, "The master and mate of a car ferry that struck yachts and ran aground off the Isle of Wight have been suspended." The next sentence reads, "The Red Falcon ran aground in fog off East Cowes on Sunday morning, weeks after another vessel operated by Red Funnel tore yachts from their moorings." Further background information follows.
Figure 1

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:

  • Window cleaning;
  • Rubbish removal;
  • Vacuuming;
  • Dog walking.

 

 

 

 

 

 

Code example of a nested list

  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:

  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