Pictures and images

• 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

• 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.

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?

• 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.

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
  • Images Tutorial by W3C.

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.