Back in the days when our computers screeched as they connected to the internet, we needed alternative (“alt”) text to stand in when images wouldn’t load. Nowadays, that’s not a problem, but alt text shouldn’t go the way of the dial-up modem!
People who access the internet with a screen reader like JAWS or NVDA need meaningful alt text to be able to understand the important visual elements on a website, app, or even a tweet.
Guess the Image!
@Nethermind (Elle Waters) tweeted a photo with the text:
“Avocado margaritas = winning in #Austin. #AccessU2017”
Worst Alt Text:
No alt text or meaningless text (“IMG_042.jpg”) – given the vague caption, this could be an image of a margarita. It could be a selfie of Elle with a margarita in her hand. Or it could be a group shot of accessibility advocates holding up their margaritas. It’s impossible for a screen reader user to know.
Not Very Meaningful:
“avocado margarita”
Pretty Meaningful:
“avocado margarita in salted glass”
Even More Meaningful:
“frosty ice cold glass tumbler of thick, creamy pale green liquid (speckled with tiny bits of cilantro), with a dusted rim of salt”
Which alt text makes you say “Mmmm!” (or “Ewww!” depending on your opinion of cilantro)?
Here’s the image for that scrumptious/ yucky alt text!
<alt text>
Frosty ice cold glass tumbler of thick, creamy
pale green liquid (speckled with tiny bits of cilantro), with a dusted rim of salt.
To write meaningful alt text for the majority of images, ask yourself two questions:
- Why was this particular image chosen?
- What feeling/understanding do you hope to create in the viewer?
Typical Example:
Photo of App Being Used in Store
Why was this image chosen?
“It shows both the app and a retail shop. Both are bright and clean.”
What feeling/understanding do you hope to create in the viewer?
“Our new app notifies shoppers of special deals they can get in our brick-and-mortar locations.”
<alt text>
A woman’s hand holds a smartphone showing the XYZ Store app. In the background is an XYZ Store location, with clothing and accessories hung neatly on racks along the walls.
Harder to Write Example: Portraits
This portrait might appear on an About Us page or an article featuring an employee.
You could take the easy way out and write:
“Hector Ayala.” But there’s more to this photo that is being shared with the sighted readers of your website.
Try this instead:
Hector Ayala sits facing the camera with his elbow resting on his desk. Behind him are two wide monitors full of colorful code.
Additional Help
If you’d like additional resources to help you understand alt text, we highly recommend the W3C’s guide. Another fantastic example of alt text in use is the Social Security Administration’s Alt Text guide, which has examples using photos of a really cute guide dog.
For years, RemDoc has been providing solutions to address the specific challenges presented by accessibility requirements. We’re proud to have a diverse team engineers, specialist, and consultants, many of whom have disabilities themselves. This gives RemDoc a real edge in testing and creating products and services with accessibility and usability in mind.
