Alternative text versions of images and diagrams

A quick and easy way to add an alternative text version of images and diagrams to your site
Image by Photo by Vincentas Liskauskas on Unsplash.

Accessibility is an important aspect of web design, and in section 1.1 of the WCAG 2.1 (Web Content Accessibility Guidelines) guidelines states that site content must: “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.”

With the recent updates to the compliance deadlines of the WCAG guidelines, all current site creators and editors for McGill are encouraged to keep sites updated to meet the requirements of accessibility by:

  • Content created after July 17, 2018: July 17th, 2020
  • Content created before July 17, 2018: July 17th,2022

An important aspect of web accessibility is the ability for users to have access to text versions of different media types on a website, and this article will address accessibility regarding images and diagrams on a site. There are different ways to go about providing accessibility for visual content, and you might come up with a different solution than the one below that may work better for your content.

This article will go over one of the solutions to add an alternative text version of images and diagrams to your page. At the bottom of the article is a video demonstration of the following solution.

Creating a separate page for text versions of non-text content

Here’s the basic idea: a page is created at the bottom of the navigation menu on the side of the page that contains the text versions of all the images, and under both the images and the text versions, there is a link that brings the user either from the image version to the text version, or vice versa using page anchors. This approach keeps media accessible while keeping your other pages from cluttering up with all the extra information.

A key thing to note when creating the text versions of the images and diagrams is to make sure that the message of the media is conveyed fully through text, instead of the graphic being described literally. This can inform how you format the text version of the image. Sometimes it might be better to present the information in a table or a list rather than a plain text paragraph.

Video demonstration of creation process for alternative text versions of images/diagrams

Back to top