Pictures and images

General

An accessible digital image is one that displays the relevant information effectively to the majority of people. This means that it should not only clearly present the important details, but should also be accompanied by a textual version of the message it conveys.

Related topics

Key tips

Purpose
  • Get the context where the image is placed from the surrounding elements or document where it is contained.
    • Why is the image there?
    • What is the image trying to say or explain?
  • Determine whether the image can be considered decorative.
    • Does it add relevant information?
  • Determine whether the image has a role in its context.
    • Is it an element that the learner can interact with eg. button? (A.k.a. interactive element)
    • Is it needed to do something?
      • Eg. a picture of an arrow pointing to the right. It might be used as a button to turn the page.
    • See: Functional images by W3C
Content
  • Verify that the content of the image fulfils its purpose.
    • Is the message or aim of the image understandable?
  • Avoid unnecessarily complex images which may be difficult for students with disabilities to understand. Eg. too many details or dense patterns.
  • If it is an animation, assure that it is not distracting and the speed and changes are slow enough to avoid seizures to sensitive students. See: Understanding seizures and physical reactions by W3C
  • It is better to avoid showing relevant text in images.
    • If this is unavoidable then alternative means for communicating the text within the image is required. Eg. Textual alternative contains the depicted text attached to the image. See: Images of text by W3C.

 

Quality

The quality of the picture should be good enough to fulfil its purpose for sighted and low vision students.

  • Can the message be clearly perceived?
  • Does it have enough contrast so that relevant information can be easily perceived?
  • Does it have enough resolution so the important details are not blurred?
  • When it is magnified, do the important details remain clear enough to be perceived?
Text alternative
  • Write text alternatives so that all students [Link: Identify student user groups] can have access to the message the images convey.
    • Assistive technologies use alternative texts to convey the information contained in non-textual elements.
  • Be concise.
    • The text should convey the message in the image without extra words.
    • Keep only the relevant details. I.e. avoid the inclusion of generic words like “image”, “picture”, … when is not relevant. ATs such as Screen readers announce the presence of non-text elements like images.
    • Eg. A picture in a document about ancient mythology, it is:
    • better “Marble statue of a Greek goddess”
    • than “Marble statue of a Greek goddess in the centre of a room filled with other ancient Greek sculptures”.
  • Be brief
    • It is of paramount importance to keep the text alternative as brief as possible.
    • In the great majority of cases the text alternative is just a short sentence or no more than 2.
    • Eg.
      • Better ““Marble statue of a Greek goddess.”
      • than “Statue of a female Greek god carved in marble.”
  • Make it part of the whole
    • Make the text-alternative part of the whole educational material.
    • Avoid redundancy when the surrounding elements -text and other images- present the same information as that in the picture.
    • Eg. A piece of text explaining the use of marble in the classical period. Then the alternative text could skip naming marble. A good text alternative would be; “Statue of a Greek goddess.”

Find out more at Text alternatives - WCAG How-to by W3C.

Follow the technical standards

Use appropriate image formats.

  • Raster images
    • It is better to use this for complex images like photographs.
    • The most used formats are JPEG, PNG and GIF.
    • When zoomed in or resized, this type of image may become blurry or pixelated.
    • It is necessary to assure that the important details can be perceived when the image is enlarged.
  • Vector images
    • They are good options for simpler images like logos, icons and diagrams.
    • The most common format is SVG which provides many accessibility advantages:
      • Scalability. They can scale up without losing quality. Then, quality does not have to be checked when increasing the size.
      • Text-based. It is built by text which is a type of content that ATs excels in managing. Searchable. A consequence is that  images can be found using text search functionality.
      • Keyboard accessible. If the user can interact with the image then SVGs allow them to navigate and interact with the different objects within the image using only the keyboard.
      • Structured data. It stores structural information of the displayed objects. This can be used by ATs to better present the content to the student.
      • Layered. It supports the addition of extra layers of information that may support students with visual or cognitive impairments.
      • For more information go to Accessibility Features of SVG by W3C and Accessible SVGs by Css-Tricks
  • Use best practices and guidelines for digital pictures
Test the result

Before publishing, always make sure that the content works as expected using ATs.

  • Use screen readers to assure that the image is shown to the user as expected. If the image has alternative text, it should be read-out-loud.
  • Use a magnifier tool to assure that the image resizes properly. When it is enlarged, it should have enough quality to perceive the relevant details.

Resources