Accessible Images

Accessible Images

For people with visual impairments, images need to be described so that the end user can understand the purpose of the image and/or read any information on an image (such as a table or chart). Images that are decorative, can actually be hidden from screen readers, as they do not serve a purpose to someone who is visually impaired.

Why Do Images Need to Be Accessible?

Accessible images are used as cues for people with visual impairments and low vision, allowing them to orient themselves more efficiently through web content.

Examples of situations where accessible images are necessary:

  • Screen readers – text alternatives can be read out aloud
  • Speech input software – users can put focus on a button or a linked image with a single voice command
  • Speech enabled websites – text alternatives read out loud
  • Mobile browsers – images can be turned off to save data usage
  • Search Engine Optimization (SEO) – images become indexable by search engines

Image Colour and Contrast

It is essential to provide enough contrast between text and background colour/ image so that the graphic is readable by users with low vision.

Here are some points to keep in mind when working with text and backgrounds:

  • avoiding red/green and blue/yellow combinations
  • use larger text
  • use larger contrast ratio between text and background
  • minimum contrast ratio should be 4.5:1

Useful tools to help with text colour choice when working with graphics:

Tagging Different Types of Images

In order to assist the end user to understand or ignore an image on a web page, we need to apply and consider one of the following techniques:

  1. If an image conveys simple information (e.g., a photograph, icon, or logo)
    • Add an ALT tag
       
  2. If an image conveys complex information (e.g., a chart or graph)
    • List all words that appear on the image in an ALT tag. This allows screen readers to read the information on the image.
       
  3. If an image is purely decorative or non-informative
    • Add ALT attribute with a value equal to an empty string (alt=""). This allows  screen readers to ignore the image.

Decorative Images

Decorative images are images that are non-essential for understanding content that is presented on a web page.

To make decorative images more accessible:

  • ALT attribute needs to be present and it's value should be equal to an empty string (alt="") see example
  • img src="decorativeimage.jpg" alt="">

Here is an example of a decorative image. This banner is purely there for decorative purposes:

Functional Images

Functional Images are images that are used to indicate action on a webpage. These can include buttons and images used as links. Text alternative for a function image should convey the action and not necessarily the image description.

To make functional images accessible, ALT tags should be used.

Example:

  • CPABC logo is a functional image because it is also a link that when clicked on, takes the user to the CPABC homepage.
     
  • It has text as part of the image and it also links to ‘home’ so the word ‘home’ should be included inside the TAG as follows:
     
  • img src="cpabclogo.png" alt="CPABC home"

Decorative Images with Links

In some situations, ALT tags should be avoided even for functional images.  

Example:

  • In the example above, each of the four carousel image links have descriptions below them.
  • In this case, ALT attribute needs to be present and it's value should be equal to an empty string (alt="")
    • img src="cpabclogo.png" alt="">

Infographics

Infographics are not accessible on their own. Like other graphics, they cannot be read or understood with a screen reader and need the following to be accessible:

  • Infographics need an alternative text description known as a “transcript.”  A transcript is simply a full text description of the infographic.
    • Transcripts can be hidden behind an image using code allowing screen readers to access it.
    • Transcripts can also be displayed below an image so that users can still access the information.
    • Transcripts can also be created on a separate page and linked to from the infographic itself.
  • Transcripts should be clear and easy to understand. 
  • Text colour should always have enough contrast between itself and the background
  • Infographics should always have a clear title and headings
  • Avoid large infographics as they don’t display well on mobile devices

More Information on Image Accessibility

Check out additional information on images and accessibility.

For more information on image accessibility, email webcontent@bccpa.ca