What the alt is “Alt-Text”?
Picture this…you are working on new content that will be delivered to students in your organisation’s Learning Management System (LMS). You are frustrated with the limited functionality of how the content looks on the page in the LMS and you want to pretty it up with fancy bullets and place an image alongside it, something your LMS won’t cater for. How do you get around this? You have a pro subscription to Canva, so you decide to create a beautiful page of content that you then export this as a graphic. You are creating an image for each page of the course, so you name the images Page1.png, Page2.png and so on. Across in your LMS you upload your 20 newly created images, that look stunning, and you insert the graphics on the pages of your LMS. Beautiful! Your work is done, and you let your students know that their material is ready to work through.
The Response…
Your first email is from Shane, a student in regional Queensland who has limited and patchy internet access. He has tried to access the course materials, however his low bandwidth coupled with his ancient computer mean he can’t load the memory consuming images that you’ve created for every page. All he gets on the screen is “Page1.png”.
Next Estelle calls you. She doesn’t have a laptop or desktop computer; she is completing the course using her smart phone. While she does have a brand-new iPhone, the LMS app has been responsive (meaning it resizes and moves text and images to be optimised for mobile devices) and it has shrunk the images down to fit on the screen, along with the other menu items and navigation tools. She is struggling because the image is so small and she is having to download it then pinch and zoom, then move around to read the content.
Finally, you realise you need a different approach when Donna calls you. Donna has low vision and relies on a screen reader to convey all the content to her. You have never had a student who is visually impaired, so you aren’t yet familiar with the functionality of screen readers. Donna tells you that all she is having read to her is “Page1.png”, then to the next page and “Page2.png”. Where is the content?
What is the solution?
The scenario described highlights the importance of using alternative text, or alt-text, to all imagery, but also shows how we need to be cognisant of what we choose to convey in an image and what we provide as text on the page.
Alt-text is a description of the content or function in an image which is relied on for situations including:
Visually impaired persons utilising a screen reader to access content where the screen reader will read the alt-text;
Low bandwidth prevents the imagery being downloaded, and the alt-text is presented instead; and
Search engine optimisation (SEO) for website content, where search engines use the alt-text to identify content on the site.
This article provides our Top 5 tips on getting started with alternative text.
Tip #1
Limit words and information being presented in images
As you can tell from the scenario, words in images should be kept to a minimum. This tip (which is more of a rule) is taking a while to be adopted, particularly when it is so much easier to make a page of content look good in a design package and put forward as an image. However, the alternative text that is attached to an image isn’t infinite. The recommended best practice is around 80 characters per image. It is impossible to attach a full page of text to the alt-text of the associated image.
Tip #2
Always change the alt-text to describe the image rather than leave it as the default filename
The filename of Page1.png means nothing to anyone except the person who uploaded the file. Even if you have a more descriptive filename, it still isn’t going to properly describe the content of the image. The most common time we have all experienced the alt-text not being changed from the filename is with emails. When you open an email that hasn’t downloaded the inserted images (and you have to right-click to download the images) it will be displaying the alt-text. Next time you open one of these emails, have a look at the placeholders and recognise whether the email has had alt-text applied, or if it is simply the filenames.
Tip #3
Don’t include the words “Image of” or “Picture of” in your description
There are two reasons for this:
The aim is to keep it short and sweet, and these add in additional words.
A screen reader identifies that it is reading the alt-text of an image, so including these words means the screen reader will state: “Image: Image of person wearing red jumper in the rain”.
Tip #4
Ensure context is included in the description
Put yourself in the shoes of someone having the content read to them and think about the value being added by the image. Perhaps the image is of a city that has been devastated by recent floods. In a lesson about the economic and social impact on communities of natural disasters, the materials may show a photo of recent flooding in Lismore. The description could read “Lismore main street flooded”, or it could provide more context of “Lismore main street under flood waters from March 2022 rain bomb” which provides a link to the more recent natural disaster.
Tip #5
Don’t forget about functional images such as buttons and tiles
We may include buttons and images that are functional, which means they will be clicked on for an action to occur such as downloading a file or navigating to another page. The alt-text on these images should describe the function that will occur rather than describing the image itself. Forgetting to add alt-text to these images will mean the screen reader won’t convey the actions that can occur, instead reading out the filename of the image (ie Button1.png) or the destination URL, which won’t mean much to a person listening to the content.
Summary
There certainly is an art to crafting concise and useful alternative text, it is something that requires thought and practice. However, providing customised text as a starting point rather than leaving the alt-text as a filename or system generated is our first step to learning this art.
Our next article will look at how alt-text is applied in a number of popular software applications.
What is accessibility and why is it important?
Also known as web accessibility, or eAccessibility, it is about ensuring equal access to content for everyone. This includes people with disabilities such as a hearing, sight or mobility impairment. While this might seem to be a ‘nice-to-have’, ensuring everyone has equal access to content is contained within the Disability Discrimination Act 1992 and the Disability Standards for Education 2005. Education providers are required to make reasonable adjustments to materials and content to ensure it is accessible to all.