Basics:
Alternative Text Deep Dive
Part 3
Here we are, part 3 of our Deep Dive into Alt Text. If you missed out on the first two parts, you can start at part 1 here.
The most critical question we need to ask ourselves when writing alt text is – what does this image do?
There are different types of images and those different types of images have different alternative text needs. In this next section, we’re going to go into detail about what those image types are and what alternative text expectations users have for them.
Please note: My examples below are taken from screenshots of emails that represent the image type. They do not represent the actual layout, linking, or alt text used in the emails.
Decorative Images (not linked)
You’re likely already familiar with this type of image because they are most frequently brought up when talking about alt text. These are images that are not linked and do not add value or understanding to the email. They can be spacers or other design images, but they can also be an image in which nearby text defines what it is. Essentially if you are asking yourself, ”What does this image communicate?” and your answer is, “Not really anything,” it’s likely a decorative image. Note: If your decorative image is linked, it needs to meet this criteria and that of a functional image, which we’ll discuss in part 4.
Alt text expectation: Use the null value – alt=""
Examples:
alt=""
This lifestyle image is not providing any content. It is not linked, and is therefore a decorative image.
alt=""
This product image would have a redundant alt text if we stated the name of the product again, as it is in text right below the image. It is not linked, therefore it is best to consider it a decorative image and use the null value on the alt attribute.
Informative Images (not linked)
These are images that are quite literally informing you of something. Either directly via charts or graphs, or indirectly by conveying emotions or creating an impression. If you look at an image and can’t imagine the email without this image, it’s likely an informative image. You also have some level of control over the distinction between a decorative image and an informative one – a decorative image can become an informative image based on the information that you provide in the alt text. Note: If your informative image is linked, it needs to meet this criteria and that of a functional image, which we’ll discuss in part 4.
Alt expectation: Communicate what the image is communicating.
Examples:
alt="Your favorite day to listen is Tuesday at 68% followed closely by Friday at 64%. You also like to listen on Mondays at 20% and Wednesdays at 28%"
In this informative image, the content being relayed is that Tuesday is the user’s favorite day to listen to music. Additional information is portrayed as well, and it is better to communicate this clearly than verbatim how it is displayed visually.
alt="A lively group of freelancers work in a relaxed setting with lots of creative input."
This same lifestyle image was decorative above, but we can also use it to describe the emotion or ambiance of a scene and convert that decorative image into an informative one.
alt="With Sonos brand speakers, you can control what your speakers play and where from our phone app."
In this informative image, an illustration is showing how a phone app controls speaker function. Later in the email, there are additional details about the speaker system, but not the phone app, so this graphic is actually telling the user very important information that is not portrayed elsewhere on the email.
Images of Text (not linked)
We generally try to avoid images of text as much as possible, but there are definitely circumstances where that is just unavoidable. Those scenarios can be a design that does not allow for live text, a logo or other graphics, specific fonts, et cetera. Note: If the alt text extends past 100 characters, you’ll want to slightly revise the text so that it contains the critical information within that 100-ish characters. (I talk about this more in Part 2.)
Alt expectation: Communicate the text content 1:1.
Examples:
alt="Gemini - Cooper glasses in Seaweed Crystal with Riesling > Adaptable, witty, analytical."
Because this is an image of text, the text needs to be present in the alt text. Because there is also an image of the glasses, it could make sense to include additional information about the glasses to support the user.
Groups of Images (not linked)
In email, we usually see this kind of image when we have to slice a design into multiple different images, usually for linking but sometimes for rendering purposes. When we are talking about unlinked sliced images, usually, it is best to use just one image to have the full alt text rather than breaking it up across the slices. However, most of the time if we are slicing an image, it is because we need to link different parts of it, and that is where things get more complicated, as a linked image becomes a functional image and with its own requirements that we’ll get to in part 4.
Alt expectation: Apply the appropriate alt text on one slice only.
Examples:
alt="Sproos! Red is back!"
Even though there are five slices, the first image can contain all of the alt text when these images are not linked.
Note: It was really hard to find an actual example of a sliced up email image, if you have one please send it my way.
Complex Images
It’s pretty unusual for us to work with complex images – these would be very extensive graphs, diagrams, or detailed information. These will max out our character requirements that most screenreaders will stop reading alt text at about 100-120 characters. It’s generally best to provide a link under the image that will better describe the image – either an audio or video description or a long-form text description on a web page. (no examples provided)
I’ve saved the best for last, next week we will talk about functional images, which are any image that is linked. They get their own post because they add so much more complexity to our emails and because nearly every stakeholder wants as much of their email as clickable as possible, you will almost certainly encounter a functional image when you create an email. See you for Part 4!