Best practice - Document structure

This guidance is for making accessible documents.

Layout

Simple is better than complex. If you’re unsure how to make your content accessible, just use clear headings and make it read top to bottom.

A lot of accessibility issues are introduced when layouts get complex. When you start adding columns and sidebars it becomes more of a challenge to group related content and structure it in a way which works both visually and for assistive technology.

Logical reading order

A logical reading order means that the content flows in a predictable way. In the UK this means the content reads left to right and top to bottom.

The content should be contained with related information, and at no point should it not be obvious what the next piece of content is.

Sensory characteristics

Don’t rely on sensory information. For example, don’t refer to the sidebar on the left. This is because using the word left implies that somebody can see and therefore has a sense of what is left of the thing they’re reading.

If you select a heading, a sighted user can understand what is left, right, up or down from that heading. But for somebody using a screen reader it’s linear. You just have content before it and after it.

Font

The font is arguably the most important consideration when creating a document. The colours, size and style will determine how readable your document is.

Font size

If you want your document to be accessible, you shouldn’t use a font size less than 14pt. If you do need to make the font smaller then you should make an alternative version available with larger text or provide the document in a format such as HTML so people can control the font size themselves.

You can read more about font sizes in the Services Design System.

Font style

You should always use a clear font. Fancy fonts can be difficult to ready for anyone and they are particularly difficult for people with visual impairments.

Sans-serif fonts are often easier to read than serif fonts. A sans-serif font means a font which does not have any small lines attached to the ends of the characters.

Using common sans-serif fonts such as Arial or Helvetica will make your documents feel familiar and easier to read.

Headings

Headings are one of the easiest way to structure your content. All of your content should sit under a heading and be related. If you jump between topics and don’t have relevant headings users can quickly get lost in the content.

Programme headings

A heading which looks like a heading, and a heading which has been programmed to behave like a heading are very different.

Don’t just use a bigger or bolder font. They may look visually like headings, but if they aren’t actually defined as headings then assistive technology won’t recognise them correctly.

You should tag your headings correctly in Microsoft Word.

Use correct heading level

When using headings, the correct level is also important. A heading level 1, or H1 is the one which should tell a user what the bulk of the content is in relation to.

A heading can have any level from H1 to H6. However, each heading level should relate to all the headings above it. The higher the number the more detail on the topic you should be going into.

For example, your might have a page to provide information on COVID-19. On that page you might have a section for information on how to protect yourself, and you might have another sections getting tested.

<h1>Stop the spread of COVID-19</h1>

  <h2>How to stay safe</h2>  
    <h3>Wearing a mask</h3>
    <h3>Washing your hands</h3>
    <h3>Social distancing</h3>

  <h2>How to get a test</h2>
    <h3>Getting tested if you're a key worker</h3>
    <h3>Getting a test for somebody in a care home</h3>

If there’s no connection between the heading you’re writing and the ones above it, consider moving that content to where it makes more sense.

If you need to change the size of the heading, use a different class to style it rather than changing the heading level itself.

Correct formatting

Just like with headings, you should always use the correct formatting for the different elements in your context. For example, a quote should be programmed as a quote and not just styled to look different.

Link text

For any link, remove everything else on the page and make sure it still makes sense.

An example of a bad link would be:
Click here to check if you’re eligible for a free puppy.

An example of a good link would be:
You can check if you're eligible for a free puppy.

Never use a link which tells the user to “Click here”. The word “click” makes an assumption that a mouse is being used, but the user could be using a keyboard or some form of assistive technology.

Images

A lot of people use images to make things look fancy rather than there actually being a need for it. If you’re going to use an image, think about if it is really needed and if there is no other way to get that content across.

If you do use an image, you must provide alternative text, and you must not use assumptions such as “as you can see from this image” or “shown in figure 1”.

Alternative text

Alternative text is a description of the image. You should make the alternative text helpful for the user and not just write anything in there to make the accessibility checker stop complaining.

The alternative text should give enough context so that even if you can’t see the image you can have a good understanding of what it shows and your imagination can do a good enough job of working out what it might look like.

Example of bad alternative text:
Cat

Example of good alternative text:
A cat wearing sunglasses

Decorative images

For any images which are not relevant to the understanding of the context, they should be marked as decorative. In Microsoft Word, mark the image as decorative.

You shouldn’t publish PDFs, but if you do find yourself working with them, in PDFs you should mark decorative images as artifacts.

Text as images

Never use pictures of words as a replacement for actual words. This can get very confusing for people who are using screen readers and it can make the words blurry if somebody is using a screen magnifier.

If you want to make your words look fancy, change the font. This way assistive technology can still read it, and people can always change the font if they can’t read it.

Colour

Don’t just change all of the colours for the sake of it. The use of colour should be well considered. Are you changing the colours just because you think it looks nicer? Or are you trying to draw attention to certain information?

If you do use colour, make sure it isn’t the only method of communication. The ability to see colour must be treated as a luxury and not a requirement.

Before exporting your document, remove all the colour and make sure it still makes sense.

Traffic light systems

1 in 12 men and 1 in 200 women have some form of red-green colourblindness.

Red, amber and green is often used to show levels of severity. If you don’t add additional context then to a lot of people everything will just look yellow.

Rather than just using colours, add labels such as low, medium and high. This means the information is still available to those people who can’t see the colours correctly.

Colour contrast

When using colour, you should make sure the contrast ratios are strong enough for people who might have visual impairments.

If you use soft contrasts, such as pastel colours on a white background, then some people will simply not be able to see the words.

Make sure the colour contrast is sufficient between text and surrounding elements. It should be 4.5:1 for normal text or 3:1 for large text.

Large text is anything over 18pt, or bold text which is larger than 14pt.
Normal text is anything under 18pt and is not bold.

You can use the WebAim Colour Contrast Checker or Contrast Ratio to make sure your colour combinations are accessible.

Language

You should try to write in plain English and for a reading age of 9. Some people who might struggle with higher reading ages are those who:

• have cognitive impairment such as dyslexia
• do not speak English as their first language
• have not have access to education

You can use the Hemmingway Editor to check the reading age. Hemingway will measure your content against an American school grade. A 9 year old would be in Grade 3 or Grade 4 depending on when their birthday. So aim for Grade 4 or lower.

Reading age

You should try to write in plain English and for a reading age of 9.

By lowering the reading age, you will make the information more accessible to more people without excluding anyone who reads at a higher level.

Tables

Tables should only be used for data. People often use them for the wrong reasons such as visual design.

Keeping tables simple and using clear headings is the best way to make them accessible. Don’t use merged cells or nest tables within tables.

If you do have a table, it is best to summarise the data in a paragraph. This is good so that people with screen readers don’t have to go through the table cell by cell to get the insights from it.

For example:

Accessibility checkers

Use the Microsoft Office Automated Accessibility to make sure you have not introduced any obvious errors.

They won’t find all errors but they might help you find some of the common ones such as missing alternative text.

Export with tags

When you export your document, you should always export it with accessibility tags. These are additional bits of information which tell assistive technologies that a heading is a heading and a quote is a quote.

If you don’t export with tags, all of that hard work you’ve done to make your document accessible will be lost.