Introduction
This is the All Access podcast Access & Allies. My name is Rowan; I’m the co-President and Director of Communications for All Access.
The goal of Access & Allies is to attempt to break down any digital accessibility topic under the sun to answer any and all of your questions around making digital tools more accessible. Thanks for tuning in, and if you prefer to read along, make sure to find this episode’s transcript in the notes — along with any resources I mention.
About all•Access
All Access is an initiative focused on supporting organizations and business leaders in making their online presence and digital information accessible to everyone, regardless of ability or disability, device they’re using, or their location, be it sitting at home or on the bus. We make inclusive digital spaces through making new or retrofitting existing websites to meet WCAG’s standards for accessibility, training & consulting, and full or partial site assessments.
This, is episode three: Alternative Text.
Ep. 2 Recap - Success Criteria 101
Last episode we talked a bit about meeting the 68 success criteria of the Web Content Accessibility Guidelines (or WCAG). Specifically in relation to meeting the level AA standard which is the intended level for most cases when developing website and digital media.
Hot tip in case you missed it: the transcript, along with added notes and even more context for the information shared in the podcast is available on our website under Articles, episode 2.
The first success criteria mentioned in the last episode was about alternative text, which I’ll be going into more detail soon here. We also discussed keyboard and tab navigation, distinguishability, and a bit about nuance when it comes to digital accessibility. So if you missed it be sure to go back and have a listen.
Topic Intro - Alt Text
Now, when we’re talking about alternative text, or “alt text”, we mean the written information that describes an image or non-readable content. Think also, charts and graphs, buttons, and even tables that can use table summaries which is a form of alt text.
First and foremost, let’s think about “alt text” as text that can be used as an alternative to the visual content, such as images.
Images and graphics can be essential for sighted users when it comes to conveying information, brand identity, key points throughout the content for remembering certain information.
And if we’re providing images without a way for screen readers to engage with that content, many users miss out on crucial contextual information. They might wonder what they’re missing if an image is indicated without a description, or in some cases, a screen reader might get stuck at an image and the user won’t be able to appreciate the rest of the content you’ve thoughtfully put together.
Alt text doesn’t just benefit screen reader users. Images can be turned off on mobile sites for data-roaming purposes. Refreshable braille displays will read alt text as well. Alt text will allow someone using speech input software to focus on buttons or linked images with voice commands. And your Search Engine Optimisation — or SEO — greatly benefits when images are indexable. Alternative text is all around just good business!
So it’s is one of those background elements that should really be a priority when compiling content for your website, social media, or any other digital presentation.
I’m going to break this topic up into a few sections. I’ll cover a couple good to know basic rules, then go into alt text in different contexts, and then apply it to the different levels of the Web Content Accessibility Guidelines.
Rules of Writing Alt Text
Purpose
So getting into the rules of writing alt text, first and foremost is the purpose. Alt text priority tends to change based on the purpose of the image. Is it informational? Is it decorative? First think about why the image is there, then build the text around that. Because you don’t want to write a full on paragraph for alt text if you can avoid it.
Common Mistake
Second is, the most common mistake I see is alt text that says “Image of” or “Photo of”, for example. The screen reader will indicate what the content is before it reads the alt text. So if you write “Image of,” the screen reader will say aloud “Image of image of”. So just go right into describing the image.
To Decorate or Not to Decorate?
And then, when it comes to decorative images? The rule around decorative images from the WCAG is basically, and I’m paraphrasing here: “If you feel like it”. You don’t have to include alt text for decorative images, but you do have to indicate that they are decorative!
For developers, make sure to provide a null text alternative if opting out of alt text.
That said, I have heard that decorative image alt text is often appreciated. It’s just going that extra step to make sure everyone can engage with the content equitably.
A lot of the time the decision around providing decorative alt text boils down to capacity, but if you have the time my vote is to just do it.
Informative images
For informative images, if your image represents concepts and information, write a short description conveying the essential information the user requires for context and no more.
Generally speaking, your alt text should be one sentence, two at most, and as short as possible without losing clarity.
Functional images
The next thing is functional images. So, functional images are images that are used as links or buttons. Instead of describing what these images look like, use the alt text space for describing how the image is used.
If it’s a link, where does it go?
If it’s a button that activates a command, what does it do?
An example might be “Button submits the completed form.” Or, “Image links to contact page.”
Images of text
The next thing is images of text. So, when it comes to images with text inside the image, I cringe. Yes, it’s sometimes necessary for marketing purposes — yes, even at All Access we use images with text in them for eye-grabbing content. Don’t come for me. But the best rule for images with text is “Don’t do it!”
If you must, though — and, who are we to judge? — make sure your alt text includes the words on the image. I usually write alt text that briefly describes the decorative aspect of the image in the first sentence and with the second sentence say, “Text reads,” then the wording on the image.
Complex images
Now, getting into a more complicated topic here: graphs and diagrams are examples of what are called “complex images”. The WCAG says “If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
One good thing to do here is to provide a summary and explanation of the complex image as part of the main content. The alt text can explain what the graph or diagram is used to convey and mention that an overview is included in the main content of the page.
Then, your overview might say something like, “The above chart indicates the third quarter of 2022 saw the highest revenue, with a steady incline and and decline throughout the year.” As a bad example (I don’t understand budgets but you probably get the idea).
Image Groups
If there is a group of images that convey one thing, use only the first image’s alt text to explain the information for the entire group. Then, developers, you can include null alt attributes (mentioned before) for the rest of the images in the group. This is a lot like complex images.
Image maps
Next up we’ve got image maps. For an image with multiple clickable areas, make sure the overall image has alt text explaining the context of the image. Then, each clickable area needs to have its own alt text, going back to functional images, to describe the action the clickable area will engage.
This is something you really want to be thoughtful about when you’re planning the design of a web page, for example. Do you really want to go into all of this development, right? Maybe there’s another way to convey the information you’re trying to get across.
Although if you do want to go that route, more power to ya!
Which Alt Text do I use?
I know I just gave a long list of different types of images and how they all require different considerations. If you’re a visual person like I am and feeling totally lost, don’t worry! I will provide a link in the notes section for the W3C’s “alt Decision Tree” to help you figure out which alt text to use.
It’s a great resource to have on hand, but also just take some time and familiarize yourself with the different types of images and what kind of alt text goes with them.
Level A, AA, AAA
Now that we have an understanding of how to apply alt text to our images, what takes our alt text to the next level? And by that, of course I mean level A, AA, or AA WCAG compliance.
Keep in mind we’re aiming for AA most of the time.
So, I’m going to get into some list items here and it’s going to sound wordy, but just bear with me for a minute.
Success criteria 1.1.1, Non-text Content, states: “All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except in certain situations”. I’ll provide a link in the notes so you can check out the more fulsome details on 1.1.1.
So by providing alt text in most situations, you’ve already reached level A. That’s all that means.
The next bullet is 1.4.5, which is Images of Text. And that states: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text for customizable and essential images.
And all that means is, to reach level AA, don’t use images with text as part of the image unless absolutely essential — for example, a logo might be an exception here.
And finally, 1.4.9, Images of Text (No Exception), states: Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.
This point is a level AAA success criteria, and basically means that there are no exceptions. You have text in your logo? Then don’t use your logo.
That’s why AAA is so difficult to achieve and why AA is typically the goal. A level AAA website doesn’t allow for much design if any, and ironically, wouldn’t be very accessible for many sighted users, as much as it would be great for people who use screen readers.
Wrap Up & Sign Off
So, there you have it! As with anything, there’s always more to learn about this topic. If you want to know how to apply alt text in different settings or are confused about anything I talked about, I encourage you to use your search engine of choice to look up the myriad of alt text resources out there, or reach out to All Access through LinkedIn or via email, and check out the resources linked in the notes section.
Once again, this has been All Access’ podcast Access & Allies episode three: Alternative Text. I’m your host, Rowan King, and if there are any topics you want to hear more about in relation to digital accessibility, make sure to email us at info@allaccess.dev. Also, check out our website for more information on who we are, what we do, and neat facts about digital accessibility at allaccess.dev.
It's been fun talking at you and until next time on Access & Allies.
