Writing accessible online content

Accessible content is about ensuring as many people as possible can access as much content as possible.

For example, content creators need to consider how a user will access the content if they can't:

  • see a screen
  • differentiate between colours
  • use a mouse to navigate
  • hear
  • focus attention for long periods
  • remember or recall 

Accessible content also relates to the device someone is using. A user should have an equivalent experience whether they are using a computer or laptop, tablet, phone, or other mobile device. Generally this is a technical consideration, but it is a good idea to check your page/s on a few different devices. A user with a visual impairment may prefer to use a website on their phone since the mobile version is often more simply formatted.

Accessible content usually means better content for all users.


Resources for web pages, documents, email and more

Headings and page layout

Predefined headings are used to structure content, and to make it easier for both sighted users and screen readers to scan the page. The heading tags (h1, h2 etc) tell screen readers the structure of the page and should always be used (rather than manually setting a larger font or bold text).

Headings are available in text editors (e.g. for web pages) as well as in email and Word.

More information: overview of page structure from WebAIM 

Links

Every link should make sense out of the context of the text that surrounds it. Screen reader users can choose to navigate a page only by the links on that page. Any variation of 'click here' should not be used (the screen reader would read 'click here, click here'). Examples of links that convey meaning are shown on this page.

More information: overview of links from WebAIM 

Additionally, it is important that a website behaves predictably. Opening links in the same window preserves the back button trail.

Images

There is a difference between informative and decorative images. Informative images convey information that is not covered in the surrounding text. Decorative images do not need to be seen for the content to be understood.

  • If the image conveys information that is not covered by text on the page, alt text must be provided
  • If the image is purely decorative, the alt text tag can be blank and a screen reader will ignore it 

Also consider the information that is being conveyed in an image. The meaning should be clear independent of colour, and if an image is complex it may be better to provide a series of images each focusing on one aspect. 

More information: overview of images from WebAIM 

Videos

For a video to be accessible there are considerations around captioning, subtitling, and the provision of a transcript. These can add a significant overhead for creating resources. The Skills team can advise about options with ChiPlayer recordings.

Lists and tables

Bulleted or numbered lists give information about the structure of content. Lists are a good way to break up content: bulleted lists indicate points of equal weight; numbered lists can indicate a sequence or hierarchy. Again, use the predefined formatting for lists within the text editor so the web page properly interacts with screen reader and other software.

Lists are usually preferable to tables because tables can require non-intuitive sideways scrolling. If you think you need to use a table, consider if there is another way the information could be presented.

More information: summary of lists from WebAIM and an overview of accessibility issues related to tables from WebAIM.

Word files and PDFs

Making Word and PDFs accessible means paying attention to many of the same areas as a webpage. However, these are addressed in the source document (e.g. in the Word document) before it is uploaded.

The British Government's Digital Service has a blog post outlining the benefits of content presented in webpages over PDFs.

Excel and PowerPoint

Email

Writing accessible email means paying attention to many of the same areas as a webpage. Outlook has a number of built-in options.

Additional resources

UK Home Office

Clear dos and don'ts from the Home Office about creating content for: users on the autistic spectrum; using screen readers; with low vision; with dyslexia; with physical or motor disabilities; and for who are deaf or hard of hearing