UACES Facebook Making Images Accessible | How to make images accessible for websites

Making Images Accessible

When someone is visually impaired, they use a screen reader to access websites. The screen reader reads aloud all the text on a page. If an image is on a page and does not have a caption or alt text (description), the site visitor is unable to discern what is happening in the image or even if the image is important. Remember that screen readers (and Google) cannot 'see' your image. 

Using Alternative Text (alt text)

The first principle of web accessibility for images is alt text. EVERY IMAGE MUST HAVE AN ALT ATTRIBUTE.  It can also be complex. Alt text means an alternative to using an image. It is read by screen readers in place of an image. As a content contributor, it is imperative that you add descriptions to the photos you add to the website.

Alternative text can be presented in two ways:

  • Within the alt attribute of the img element.
  • Within the context or surroundings of the image itself.

Below are the most important aspects of creating an effective alt attributute: 

  • Be accurate and equivalent in presenting the same content and function of the image.
  • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
  • NOT be redundant or provide the same information as text within the context of the image.
  • NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

How to add accessible image descriptions to already uploaded images

Can't see the video? Download the image description help document  here and click here to view the transcript.

Examples and Resources

For examples of how to craft an image description visit the webaim website

Sometimes an image such as a detailed illustration needs a longer description. Please contact the webteam if you need help making a long image description.

Color contrast, icons, and illustrated images are all considerations when making images accessible.

Remember that color blindness is also a consideration when building a webpage. If you remove color from an image or illustration is the image still understandable?