Related Guidelines:1 WCAG 1.1.1
What is Alternative Text?
Alternative Text, or alt text, is a text description of an image in the background (i.e., HTML) of a website, document, slide presentation, online course, etc. Accurate alt text allows a screen reader2 to convey an image to the learner or replace a broken image not loading.
Adding alt text to images you provide is a great help to students, especially those who rely on screen readers. We offer some introductory information below, but to learn more about alt text, including what it is and how to use it, visit the Images Tutorial from W3C.
Writing Alternative Text
How detailed the alt text has to be depends on the purpose of the image on the page. As a result, when writing alt text, it’s helpful to ask yourself, “Is this image informational, decorative, and/or functional?”
Informational
If the image is informational, that means it has some information needed to achieve the learning goals.
Examples of informational images include charts, graphs, maps, infographics, images of tables, and images for analysis – for example, a photo of a building in an architecture course.
Simple Informational Images
To deliver simple information via alt text, we suggest writing a one or two-sentence description of the image in the alt text field that explains why the image is relevant to the material it is included with.
Complex Informational Images
Some images, such as charts, diagrams, images of tables, and infographics, may require longer descriptions that are best handled by adding a description next to or after the image, or in an additional document accessed via a link on the same page.
Alt text: Depicted are rectangular squares that comprise an arch with the keystone at the top. It uses arrows to demonstrate that the pressure from above the arch is distributed evenly throughout the arch’s blocks, resulting in the bulk of the weight resting on the piers below the arch. Key vocabulary terms shared include: extrados arch (exterior of the arch), intrados arch (interior of the arch), striking point, and springing line.
Equations
Instead of displaying equations in an image format, the most accessible solution is to use a tool that will output the equation using HTML and MathML so that it can be read accurately by a screen reader and other text-to-speech tools.
Examples of such tools are Mathpix and Equatio. Mathpix has a free version that may suffice if you don’t need to create or remediate more than a few documents a month.
Other Images with Text
There are also images that have text in them, but don’t necessarily convey data like a chart or a graph; for example, web advertisements or memes. When possible, avoid using these types of images because the text cannot be highlighted, copied, or read by a screen reader. Instead, present that text in digital form.
However, sometimes you cannot avoid sharing resources with learners that have images with text in them, such as when incorporating content from social media platforms. In this case, make sure any text incorporated in the image is also in the alt text.
Memes
GIFs
The guidelines for GIFs, which are images that are animated, are similar to other images. How descriptive the alt text needs to be is based on the type of image and its purpose on the page. If the GIF includes text, that text should be copied in the alt text field as well. Review the information in other sections.
If you don’t have the option to add alt text for GIFs in the platform you are using, you may need to add the description of the GIF somewhere else on the page where the GIF is displayed.
Alt Text: Online Course Grow your Business. You will learn about digital marketing strategies, effective branding, and managing an e-commerce website. Sign up today.
Functional
If an image is functional, that means the image is interactive, clickable, and/or functional in some way.
Examples of functional images include icons or buttons, image links, image hotspots in a quiz, and clickable or interactive maps.
If you’re writing alt text for a functional image, think of ways to convey what the action in the image does. For example, if the image of a printer will allow learners to print material, use alt text like “print this page,” instead of “image of a printer.”
Icons
This is a stand-alone icon image that has a function.
Alt text: Print this page
Linked Logos
Linked logo.
Alt Text: Cornell University
Interactive Maps
The Hot Spot question type in Canvas’s New Quizzes tool.
This is another example of a functional image because learners have to click on certain parts of the image to access information or perform an action. These have additional accessibility concerns related to keyboard navigation. Because of this, we caution against using the Hot Spot question type at this time.
Decorative
If an image is decorative, that means its absence would not impact the learning goals.
Examples of decorative images include stock images or images used as a supplement to text that conveys the same information, and decorative shapes and lines for page design.
If an image does not add information to the content of the page, we suggest leaving a null (empty) alt text to let a screen reader know to ignore it. We recommend taking this approach but note that how this is done depends on the tool used. With some tools, simply leaving the alt text field blank is fine but others have a specific checkbox that you have to check off. For more information, we encourage you to review the Specific Tools sections in Documents, Slides, or Canvas.