Creating Accessible Content

Digital accessibility guidance

This guidance is relevant for Portfolio and UAL Showcase. When you upload content you will be prompted to include specific information which will make your content more accessible.

Below is an explanation of what digital accessibility is, why it’s important and how you can make sure your content is as accessible as possible.

What is digital accessibility?

Sometimes referred to as “universal design”, digital accessibility is about making sure your content is created in a way that makes it available to as many people as possible.

For example, what can you do to make sure your video content can be enjoyed by someone who is deaf or someone who is blind? Don’t assume that only people with full sight and hearing consume video content.

Why digital accessibility is important

If your digital content is accessible it can be consumed and enjoyed by everyone including:

  • People with permanent disabilities or neurodiversity.
  • People with situational disabilities such as a broken arm.
  • People whose first language is not the language used in your content.
  • People in certain situations, for example, someone watching a video in a public place might choose to watch the video without sound if they don’t have earphones.

Did you know that accessible websites and accessible digital content are more likely to feature higher in search engine results?

How to make your content accessible

Making accessible content isn’t hard and there are some very easy things you can do that make a huge difference with accessibility needs.

Adding alternative text to media

You are required to add alternative text (also known as alt text) to all the media you upload. This includes images, videos, virtual reality (VR), audio and embedded content but does not include text content or Portable Document Format (PDF) files. The requirements for adding alt text differ slightly depending on whether you’re uploading media to a project on Portfolio or Showcase. Look out for the prompts and the required form fields when you upload your media.

Images

Alternative text:

Adding image alt text allows screen readers to describe the image, which is important for blind and partially sighted people. Alt text also tells search engines like Google what your images are of and makes them findable.

How to do it:

  • Make your alt text short but descriptive. It should be no more than 2 sentences and up to 125 characters approximately. It should accurately describe what is in the image. Example: A man and woman standing in front of a fountain in Trafalgar Square.
  • Don’t use an image file name as alt text as it may not accurately describe what is in the image. Example: File names like traf_square_lon01.jpg do not accurately describe what is shown in the image.
  • Avoid text in images wherever possible. This is because people who are blind or partially sighted won’t necessarily be able to read the text in the image. Additionally, someone who doesn’t speak the language of the text won’t be able to understand it. Tip: If you absolutely must have images of text make the image alt text the same as the text in the image.

Video

Captions:

Adding captions to video is important because they:

  • Help people who are deaf or hard of hearing to understand what is going on in the video.
  • Help people in certain situations understand what is going on in the video. Example: someone on a bus watching a video on mute so they don’t disturb other passengers.
  • Help people whose first language is not the same as yours or the language in your video.
  • Help search engines like Google understand your video content. This can make your content feature higher in the search engine results.

How to do it:

  • Captions can be “burnt in” (also referred to as “baked in”) so that they are always visible on the video or they can be “closed” and turned on or off as desired.
  • Platforms like Vimeo and YouTube can auto-generate captions, which you can then edit. Auto-generated captions often have errors and may not be totally understandable so it’s important to edit them. Don’t forget that video on other platforms such Instagram should also have captions.
  • Find out how to edit captions on YouTube.
  • Find out how to add and edit captions on Vimeo.
  • Instagram doesn’t provide a video caption service but third-party apps such as Clipomatic or Clips (Apple devices only) are available. Alternatively, use burnt in captions.

Flashing images

Did you know that flashing images can cause seizures in people with photosensitive epilepsy? This applies to videos and animated images such as GIFs.

How to do it:

  • Avoid having anything that strobes or flashes more than 3 times per second in your videos and moving image files.
  • If you can’t avoid this, make sure you include a warning at the start of a video, for example, that allows the person watching to decide whether or not it is suitable for them to watch.

Audio

Audio content such as podcasts can also be made accessible by providing the content in an alternative format.

How to do it:

  • Ensure that your content is descriptive so that everyone can follow what is going on. Example: Someone being interviewed should be introduced by the interviewer before they speak.
  • Transcribe your audio content and make the transcribed text available on the relevant webpage or add it to an accessible document that can be downloaded.
  • Visit the W3 website for tips on creating good quality transcripts.

Tip: Transcripts can also be provided for your video content and are another way of making it more accessible. Captions generated in YouTube can be downloaded, edited and used to produce the transcript.

Use of colour

Colour contrast

The contrast between text and the background is important because:

  • It can impact on a person’s ability to perceive information in a visual way
  • Some people have difficulty seeing shades or colours – this is often referred to as “colour blindness” or “colour vision deficiency”.

Example: White text on a light blue background is very difficult to read.

How to do it:

  • Download the Colour Contrast Analyser to check your content. This tool helps you determine the legibility of text and the contrast of visual elements.
  • The Colour Palette from Sussex University is a good reference for colour contrast and doesn’t require you to download anything. Avoid the colour combinations that are labelled as “Insufficient Contrast”.

Colour for meaning

You should avoid using only colour for meaning. This is important because some people are colour blind but it is also important because colours have different meanings in different cultures.

How to do it:

  • Check the colour contrast using the tools described above.
  • Make sure visual representations of data such as graphs and pie charts have a key are clearly labelled.

Documents

Documents can be challenging to people who use screen readers or other assistive technology and to people with cognitive disabilities. Did you know that Word and PDF documents are not automatically accessible?

Tip: People may not download a document because of the file size, especially if they are using a mobile data plan. Additionally, some document file types may not be compatible across all devices. Include this information in the document name.

How to do it:

Clear language

We don’t read text on a website like we read text a paperback novel or a magazine. When we read text on a screen, we tend to scan read and find the relevant information as quickly as we can. This is especially true on mobile devices as we are used to scrolling through a high volume of content very quickly. The information below is relevant to written text on webpages and in documents.

Using clear language makes it easier for everyone to read text online but it’s especially important:

  • For people with specific learning difficulties (such as dyslexia) or autism spectrum conditions (such as Asperger Syndrome).
  • For people whose first language is not the language you’re writing in.

How to do it:

  • Aim for short sentences that are clear and concise.
  • Don’t use jargon
  • Break up information with bullet points.
  • Use numbered bullets for instructions.

If writing in English, copy/paste your text into Hemingway App which grades how easy text is to read. Aim for a readability score of 5 or 6.

Accessible hashtags

Hashtags can be hard to read and have the potential to cause confusion when written in all upper-case or all lower-case characters. Make your hashtags accessible to everyone whenever you use them.

Tip: Camel case hashtags are easier to read because each word is more obvious. They can also help screen readers identify each word which gives a better experience to people with visual impairments.

How to do it:

  • Use camel case hashtags. These are hashtags that use an upper-case letter for each word in the hashtag and make the hashtags resemble the humps on the back of a camel. Example: #WeAreUAL #ArtAndDesign

Don’t miss

Got an issue?

Thank you, your feedback has been received.