Alternative text: accessible practice

Alternative text, or “alt text” is a short description or tag added to images found online or in documents. It’s a way of describing images for people who are unable to see them, usually because they have a vision-related disability. It’s generally not visible on the page like a caption would be, but it’s an essential requirement for people who use assistive technology like screen readers.

We asked our Digital Accessibility Ambassadors – UTS students with lived experience of disability about why alternative text is important to add to images in your subject.

A screen reader is a type of assistive technology that conveys content on the screen in a non-visual way – for example via speech or braille. As the screen reader cannot convert an image into text it will read out the alternative text (and worst-case scenario the file name if the alt text is missing).

Demonstration: Alternative Text with NVDA

NVDA is a popular type of screen reader that a student might use on their own device. This demonstration shows why adding alternative text to your images can help students who use this assistive technology.

Students Demonstrate: Images with Zoom Text

Some screen readers don’t read out the alternative text for images, as they are used by people who have low vision or cognitive or learning disabilities. So pointing out key elements in important images as text is also important.

Zoom Text is a type of assistive technology that a students might use on their device to convert text into audio, magnify text and change the colour scheme. This demonstration shows why describing images and proving text alternatives is important.

There’s no single right way to write alt text, but there are some things you should aim to avoid. Here are a few principles to keep in mind when you’re creating alt text.

Purpose

What is the purpose of your image? What do you want your audience to take away from it? Writing your alt text with the purpose of the image in mind will help users to connect the overall content of the page with the images you include, ensuring that they do not miss out on any important details.

Detail

Include enough detail to ensure that your reader can get a sense of what’s in the image. Vague alt text that don’t provide much additional information might have the unfortunate consequence of confusing your reader rather than making your content clearer.

Length

Putting too much text in the alt text box can make it hard for the user to absorb all of the information, so try to keep it to 150-200 characters. This can be difficult if your images contain a lot of detail – for example, when using graphs or charts. The best way to mitigate these problems is to include a longer description on your page and describe where that information is in the alt text. You can find more information about image descriptions in our Add image descriptions for complex images resource.

Marking as decorative

Are you using an image for decorative purposes, like a border, banner or logo? If it’s not especially important for understanding the written content, save yourself and your reader time by marking the image as decorative. This will tell screen readers that the image can be skipped over, making the browsing experience for screen reader users even smoother.

Different programs have different ways of allowing you to edit or add the alternative text.

In Canvas, you can add the alternative text in the Rich Content Editor, once you upload an image, Alt Text and Decorative image will appear under the heading Attributes.

Add the description of the image in the Alt Text field, or use the Decorative Image checkbox, if the image is purely for visual appeal.

Some programs will even try and guess the alternative text for you, but it is best to always double check this as often the guess is not meaningful (or accurate). Inaccurate alternative text could create bigger issues for students than missing alternative text.