Skip to main content

4. Image and media considerations

Images may not be visible to some people. If they offer a specific context within the content, it is essential to describe it so that someone who cannot see the image can still understand the whole story and the value of the content.


🪄

Putting it into action

  • Write a contextual alternative text
  • Write action alt text for interactive images. e.g. if you're using a pencil icon as an edit button, make the text "Edit" rather than "Pencil."
  • Don't start alt text with "A picture of" or "Image:." This is redundant, as screen readers will automatically append the type of element, resulting in "Image, Image:" being spoken to the user.
  • Keep alt text short and concise. If you need to describe an image that contains a lot of text, such as a table of information, or infographic, consider adding a description in a separate element, for example, a paragraph below the image.
  • Use an empty alt tag alt=" for decorative images (images that don't add context to the content)
  • For audio and video audio, allow the ability for content managers to include a transcript
  • For videos, ensure closed captioning is available
  • If there are on-screen visuals in a video that add context to the content, describe the visuals in the transcript and, where possible, through a descriptive audio option.
  • If a video includes a wealth of content, it is ideal to also make this available in HTML so that people may both engage in this content in an alternative method and quickly access or search it without having to scrub through a video