We use strictly necessary cookies to make our site work. We would also like to set optional cookies (analytical, functional and YouTube) to enhance and improve our service. You can opt-out of these cookies. By clicking “Accept All Cookies” you can agree to the use of all cookies.

Cookies Statement and Privacy Statement

Accessibility Guidelines - Digital Content

We write for everyone

We strive to make our content accessible to everyone. This includes users with visual, hearing, cognitive or motor impairments, as well as those with learning difficulties.

Standards of accessibility change with technology: we must take responsibility for keeping up with these changes and adjusting our standards accordingly.

Follow the rules in this manual and the HSE principles. They are designed to help content meet accessibility standards.

Questions to ask

  1. Does this make sense to someone who doesn’t work here?
  2. Can someone scan this quickly and make sense of it?
  3. If someone can’t see the colours, images or video, or hear the audio, can they still understand this page?

Accessible PDFs

A PDF is only as accessible as the document it’s created from. Image based PDFs (e.g. scans of text) are least accessible as they contain no textual content. The use of print ready PDFs should be avoided. Instead, your PDFs should be optimised for digital use.

All documents should contain:

  • Document title (check the document properties for this)
  • Headings
  • Alternative text for images
  • Descriptive Links
  • Legible text size
  • Good colour contrast

Read how to make accessible Word documents, and how to convert Word documents to PDF.

Images

Don’t embed text in an image. Screenreaders can’t read it.

Images should only be added to content pages if they add value to the user. Avoid using images for decorative purposes.

Alt text (for images)

Alt text is used as an alternative to an image for people who use screen readers. (It is not the same as a caption.)

The point of alt text is to give people who don’t see an image the same information as if they had.

Don’t make alt text a literal description of the image: rather use it to explain what point the image is making.

If you’re using an image of a chart or graph, provide the same information in the alt text.

For functional images (like a start button), the alt text should say in words what the image says.

Be specific. ‘Share button’ is not useful. Explain what you can share and where.

If the image is purely decorative and gives no information at all, you probably should not use it on the website. In instances where this does happen, don’t just leave the alt text empty. Use an empty alt attribute (alt="") in your <img> tag.

For all alt text, follow the rules for language in this style manual. Be concise, clear and straightforward.

Directional language

Don’t say ‘links on the right-hand side’, ‘image above’, or in any other way try to indicate a direction using words.

Headings and subheadings

Headers should always be nested and consecutive. Never skip a header level for styling reasons. 

• H1 = title of page

• H2 = subheadings

• H3 = sub-subheadings

Read more about headings and subheadings. 

Links

Link text should be unique, and meaningful when read out of context. The text should let users know what content they will be brought to when they click the link.

Avoid links like:

  • click here
  • here
  • read more
  • link to [some link destination]

For links to documents, give details of the format and size, as well as the number of pages. For example, 'get some tips on how to prepare a healthy lunchbox (PDF, 1.46 MB, 3 pages).'

Read more about links.

Tables

Tables should only be used to display data. Do not use tables to layout content on a page. It will cause confusion and additional effort for screen reader users. Tables should also have alt text. This can be added in the Table Properties.

Here is an example of a simple data table: 

NameAgeBirthday
Jack6April 18
Tom3October 5

Read more about how to make data tables accessible.

Colour

Good colour contrast helps people with vision impairment and cognitive impairments to better perceive content on the page. To comply with WCAG 2.1 level AA, we are aiming for a minimum contrast ratio of 4.5:1 for body text and a contrast ratio of at least 3:1 for graphics and user interface components.

Custom styling (Inline CSS)

Custom styling using inline CSS should be avoided. Users with visual impairments may have difficulties reading online content and will sometimes use custom style sheets. This allows them to adapt colour and font size to meet their needs. 

Inline CSS styles will almost always override these custom style sheets causing them to no longer work for the user. This means that you should avoid adding things like custom buttons and fonts to content pages.

Video

Information given in a video should also be available in another format. Include a transcript or closed caption for all video.

Resources

A-Z of accessibility

Web style guide accessibility site

18F accessibility guide

Web Content Accessibility Guidelines (WCAG)