Two weeks ago I released a comic strip depicting a student unable to answer a test question because the question was missing critical information. The reason? Missing alternative text.
Alternative text, often shortened to “alt text”, is text attached to non-text elements on a page so that a screen reader can supply equivalent information to a non-sighted user. When an image is missing alt text, a student navigating the page with a screen reader never receives the content of the image.
In other words, when you use an image in a non-decorative way and fail to include alt text, there is a giant, gaping hole in your content. That’s a user experience we want to avoid.
But not all alt text is equal. Adding some words quickly without thinking through the required level of detail and the context in which the user will encounter the image also leads to a lousy user experience. Let’s explore 3 pitfalls we want to avoid when building online course materials.
Pitfall #1: Missing Alt Text
A screen reader can only read the information that is provided to it. That makes it incumbent on us as content creators to supply the necessary alt text. This is super important, yet according to The WebAIM Million, an annual analysis of the accessibility of the top 1,000,000 home pages, 26% of all home page images were missing alternative text as of February 2021.
Whoa.
Sure, some of those images were probably decorative, but others contained product descriptions, explanatory diagrams, promotional offers, and other valuable information that a user navigating the site with a screen reader never received.
The Web Content Accessibility Guidelines (WCAG) regarding alt text require that, except for a few exceptions, “All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.” In other words, we need to associate each image with a description that conveys in words the content of the image.
Let’s compare the user experience of a sighted student and a non-sighted student using an example. Let’s say the students are given an image of a triangle with height 2 and base 3 labeled and the following question as text: “What is the area of the following triangle?”
A sighted student perceives the text and the content of the diagram and determines the question to be: “What is the area of a triangle with height 2 and base 3?”
A non-sighted student using a screen reader perceives the text and the presence of an image, but not the content of the image, unless it includes alt text. Thus for this user, the question comes across as: “What is the area of an unknown triangle?”
These are far from equivalent learning experiences.
Pitfall #2: Undescriptive Alt Text
Sometimes alt text is present but misses the point. Undescriptive alt text is any alt text that fails to provide the equivalent information provided by the image.
In that same WebAIM project, 9.6% of the images had “questionable or repetitive alternative text—such as alt="image", "graphic", "blank", a file name, etc.” Imagine trying to answer a question about the data conveyed in a graph where the only description given is “graph”.
Here’s another example. Let’s say a student is presented with an image of three different triangles and asked to identify the equilateral one.
Missing alt text would make the question unanswerable, but equally unanswerable would be alt text that reads something like “three different triangles”. That phase doesn’t tell us anything about the triangles. In order to differentiate them, the student needs a description of the lengths of all the sides.
The user experience of undescriptive alt text is no better than missing alt text.
Pitfall #3: Overly Descriptive Alt Text
While missing and undescriptive alt text are the most common pitfalls, there’s one more category we want to avoid when building learning materials, and that is alt text that provides more information than a sighted student would receive.
When using alt text in educational settings, it’s important to think about what the student is expected to know and the context in which the image is being used. For example, if the student is learning about a historical figure and is supposed to recall key details of their life, the alt text for a photo of that person should not supply any more information than is conveyed by the photo. So a photo of NASA mathematician Katherine Johnson should not, for example, include her birth and death years in the alt text unless these are present in the image.
Returning to the image of 3 triangles where the student is supposed to select the equilateral one, another alt text failure would be something like “equilateral triangle”, “isosceles triangle”, and “scalene triangle”. While this is more descriptive, it fails to account for the image’s context because it gives away the answer to the question. So what would work well? A thorough and relevant description would be something like: “3 triangles: Option A: 3 equal sides, Option B: 2 equal sides, Option C: no equal sides”. With this last description, the goal of the question is achieved and the student is tested on their knowledge of triangles.
The alt text should supply the same, no more and no less, info that the image supplies to a sighted user.
Conclusion
Writing alt text forces you to think about the role of images in your content and whether you’ve communicated what you intended. In this article I’ve focused on examples related to assessments, but the need for alt text extends to all online course materials as well as company websites, ecommerce sites, personal blogs, and the rest of the internet.
Having detailed descriptions that account for the context of the material is one step towards ensuring that all users can access your materials.
Footnote
I used the phrases “sighted” user and “non-sighted” user to paint a contrast between students with different needs. As a sighted person, I find the idea of navigating a webpage without sight to be a compelling experience and that motivates me to reflect on the user experience I’m building. However, these two phrases alone don’t reflect the totality of students. In WebAIM’s 2021 survey of screen reader users, approximately 80% of respondents reported blindness as a disability. Other users reported low vision, deafness, and other reasons for using a screen reader.
Comments