Creating Accessible ContentImages

Images improve engagement by making content more appealing. They can even help overcome language barriers and make things simpler for people with learning difficulties.

There are three main types of images:

• Simple - photos or illustrations that add meaning.
• Complex - charts, graphs and infographics that cover a lot of detail.
• Decorative - space fillers such as stock photos or patterns.

Alternative Text (Alt text)

Alt text can be read by a screen reader or displayed when an image fails to load. This helps people who cannot see or have a bad network connection.

Most images need alt text. Complex images need an additional in-depth description. Decorative images should be marked as such to be ignored by assistive technology.

When writing alt text, remember:

• Short and sweet

  A sentence or two is best; keep it under 125 characters. If an alt text is too long, it may get cropped or burden the reader.

• Context is key

  Don't include every minor detail. Think about what visual details are important based on the page content. A single image can have hundreds of descriptions depending on how and where it is used.

• Don't start with "image of" or "photo of"

  A screen-reader will announce when it reaches an image. Hearing it twice can be confusing.

• Don't repeat yourself

  An alt that repeats the same message as nearby text is redundant. Mark it as decorative; that way, it can be ignored.

How to add alt text to an image

In Microsoft Word, right click an image and select "Edit Alt Text...". A panel titled "Alt Text" should appear. Add your description into the text field provided.

In Adobe Acrobat, open the accessibility toolbar and select: "Set Alternate Text". A dialogue box should open. You can cycle through each image using the arrow buttons. Type your alt text in the box provided.

You can also open "Reading Order". With the Reading Order panel open, you can right click an image in the document and select "Edit Alternate Text...".

Further reading

• Everything you need to know to write effective alt text
• How long can an "alt" attribute be?

Images of Text

When text is part of an image, it is no longer text. Its a collection of pixels.

This means:

• Text can't be highlighted or copied.
• Someone who needs large print won't be able to change the size of text. Zooming in can blur the image (pixellation).
• Someone with low vision won't be able to change colours to improve contrast.
• Text doesn't wrap onto new lines on smaller screens, it shrinks and becomes tiny.
• A
  screen-reader

  Screen-readers are software that can be installed on a digital device such as a computer. They read aloud content and provide many additional features that help people with vision impairment.

  Bitesize video: How do Screen Readers work?

  won't have access to the text (unless its copied into the alt-text).

Image of text vs real text

Can you spot the difference between these banners? (Try highlight the text in each)

You can use these tools to improve accessibility:

High contrast:

Text size:

Zoom:

Reset settings

Important updateWaste CollectionsFrom the 32nd of February - Zone A collection day will be Monday and Zone B will be Wednesday.📞 01234 123456 if you have any questions.