Alternative texts are an important part of making websites accessible for users who are blind or visually impaired, but writing them isn’t always straightforward. Alt texts are text descriptions paired with images on a webpage that users can hear when they use screen readers. While guidelines exist for writing alt text — like keeping them short and concise — in practice, the task can feel quite open-ended.
Crystal Preston-Watson, a digital accessibility analyst at Salesforce, explored this tension in the inaugural episode of her A11y Savvy podcast. The episode, “Do Blind People Dream of Electric Memes?,” talked about the difficulty of writing alt text for memes. Many memes are largely image-based, with layers of references and meaning, and that makes writing alt texts for them particularly difficult. Preston-Watson said some people want content creators to avoid memes entirely, but she disagrees.
“I love memes,” she said in the episode. “I use them a lot. I probably overuse them. So I will say there are some memes that probably should be avoided because they just are a bit too complex, but I don’t think that’s true for the majority.”
How to Help Create Good Alt Text
- Keep it clear and concise. As a general rule, alt text should be no longer than roughly 150 characters.
- Skip over decorative images. Some images are purely decorative and should be hidden from screen readers.
- Don’t put text or data in images. Keep them separate and create data tables programmatically, where screen readers can see them.
- Create easy-to-use content management systems. Developers should create systems that help content creators write alt texts correctly.
- Avoid using images in code. Whenever possible, code website designs instead of using images.
- Work with testers and developers who have disabilities. Make accessibility part of each step in the software development process.
She said a better way to ensure users aren’t excluded from participating in memes is to be more thorough on alt text descriptions — even if that’s not the standard way to approach alt texts.
“In this case, being wordy wins over being concise,” Preston-Watson said in the podcast. “Personally, I would rather have some rules broken than to have people completely shy away from trying to attempt to make content accessible.”
Software developers should be aware of these issues too. Even when developers are not writing alt texts directly, their work affects how easy it is for others to write and maintain alt texts. As technology progresses, alt texts are no longer just regulated to photos on static websites. Instead, developers have to think about accessibility along with the creation of digital tools and content.
Basic Rules for Writing Alt Text
Memes aside, generally, when it comes to alt text, keep it concise yet accurate. Jennifer Strickland, an accessibility engineer at nonprofit research organization MITRE, said she tries to keep alt texts within 150 characters. When that’s not possible, use a different type of descriptive text.
“If you have an image that’s more complex, then the recommendation has been to use a long description,” Strickland said.
Long descriptions are an alternate way to include text descriptions for screen readers. They’re especially useful for charts and graphs because they can get into the nitty-gritty details of complex visuals. Strickland said the type of bad experience to avoid is uploading an image of a chart and only writing the title in the alt text.
“You can’t tease people with alt text. That’s really a lousy and disrespectful experience.”
“You need to get the specifics,” she said. “You can’t tease people with alt text. That’s really a lousy and disrespectful experience.”
Even better, code the data table into the page instead of including them as images. Screen readers can navigate table structures and read the information by rows and columns. Strickland said that’s much more helpful than copying and pasting all the table’s content into the alt text.
“You can’t do that because it’ll just read out a wall of words,” she said. “You want to include the table itself.”
Guidelines from the World Wide Web Consortium, known as W3C, also recommend writing the most important information at the beginning of alt texts and avoiding starting with the phrase “image of” or “picture of.” Screen readers already have ways of announcing images, so adding those phrases is redundant.
Alt Text Should Reflect Context
When Strickland worked for Veterans Affairs, she reviewed a lot of alt texts accompanying images on the organization’s website. A good alt text for an image on a VA medical center’s webpage, for example, would say that it depicts a nurse and a veteran, but also include descriptive words about the interaction between the two.
“Like, ‘A nurse and a veteran talking to one another friendly,’” Strickland said. “If it looked like they were fighting, you’d want to tell that story too — but the fact that they’re being friendly and conversing with each other, that sets the tone for what the VA Medical Center is.”
Many decisions around what to include in an alt text are up to the person writing it, based on their own experiences and what feels most helpful to the user in each context.
Rachele DiTullio, an accessibility engineer at accessibility consulting company TPGi, said the convention is to only include the name of an individual in a headshot image’s alt text, but other words like descriptions of the person’s race and gender should sometimes also be included.
“That can be really helpful, especially in presentations,” DiTullio said. “Because that does give context to what [you’re] talking about and acknowledges [your] privilege and that kind of stuff.”
Knowing when to provide more context in alt texts requires feeling empathy for the user. For instance, images of check marks sometimes indicate whether a product contains a certain feature. You may be inclined to write “check mark” in the alt text, but DiTullio said it would be better to write “yes” — that’s a more straightforward way to convey the image’s true purpose of confirming the product does have the given feature.
Decorative Images Should be Skipped Over
Actively choosing when not to have alt text is just as important as knowing what to write in alt text.
Alt texts should be empty when images are decorative and don’t contribute to the meaning or content of the page, DiTullio said. That can include things like background images or even horizontal lines displayed for spacing reasons. Describing those images would only slow down screen readers and waste users’ time.
When leaving empty alt texts, be sure to set the alt text code to empty quotes. If you put empty quotes in the alt text, the screen reader will ignore the image and treat it as if it’s not on the page. If something else is included, even a white space character, screen readers will still announce the image by saying something like “space.”
But sometimes images that don’t look decorative can be decorative. DiTullio said a simple pie chart image next to a paragraph describing the data in the image could be considered decorative if they both contain the same information.
“If the chart were the only thing there, then you would definitely want alternative text that said, ‘26 percent,’” she said. “[But] if you have the alt attribute and then the text too, it’s redundant. It sounds very verbose to someone who’s using a screen reader.”
Don’t Be Prescriptive About How Screen Readers Work
Opinions range on how to use punctuation correctly in alt text. W3C guidelines say to use punctuation normally, while accessibility professional Sheri Byrne-Haber’s article about the importance of context in alt text advises people to avoid punctuation because it’s distracting. Writing three exclamation points in alt text, for instance, are read as “exclamation point exclamation point exclamation point” by some screen readers.
But DiTullio said users can control whether their screen reader announces punctuation with its verbosity settings. Every brand of screen reader works differently, so trying to get the screen reader to pronounce things the best way isn’t really necessary.
“Try not to be prescriptive with what a screenwriter announces,” DiTullio said. “The people who use screen readers know what to expect and they’re generally not bothered by excess punctuation.”
Screen readers also tend to pronounce acronyms wrong. The common name for two-factor authentication is 2FA, which screen readers tend to incorrectly pronounce as “too-faa” instead of reading each letter separately. But users of screen readers, according to DiTullio, are used to doing the conversion for those types of mispronunciations in their heads, so people don’t have to go out of their way to avoid using acronyms.
People writing alt texts need to be careful, though, not to categorize useful images as decorative images. Alt text announcing a photo of a building may not seem important for users who are blind or visually impaired, but Strickland said that’s not true. Those users may be traveling to that location and find it helpful to point out the image of the building to their sighted traveling companion.
“They thought that people who use screen readers wouldn’t care about the photo because they couldn’t see what the building looked like,” Strickland said. “[But] that person may have a companion going with them. And the person using the screen reader will know there’s a photo of where we’re going and what it looks like. And they can say there’s a photo on the website.”
Preston-Watson, who sometimes uses screen readers to supplement her vision, said alt texts are an important part of how she skims websites. Many articles today are highly visual and instead of avoiding them, screen reader users can browse through them by skipping to headlines, subheadlines and elements like alt text to figure out if the article is interesting and worth reading in detail.
“If you’re reading an article about Taylor Swift’s fashion evolution over the last decade and they have some really captivating images, you’re like, ‘I’m gonna to come back to that,’” she said. “If the alt text is really good in describing the image, you want to read the article.”
Developers Have a Lot of Control Over Alt Text
Many websites are created using content management systems, which are themselves created by software developers. That gives developers a lot of control over how easy it is for people who use content management systems to write alt text. Preston-Watson said some systems are unnecessarily difficult to use when it comes to accessibility.
“Sometimes, depending on the platform, it is a journey to find out where [the alt text] is,” she said. “I’ve uploaded the image and it didn’t allow me to add alt text when I uploaded it.”
Developers should think about ways they could create systems that would make it easier to write alt texts and even encourage people to write better alt texts, Strickland said.
“They can build the templates and the admin interface to prompt that content creator, guide them on how to create the right alt text — that it should be 150 characters, don’t include ‘Image of’ or ‘Graphic of’ and make it required so that they can’t skip it,” she said. “Or make them select a check box that says it’s decorative and then that template will then automatically [hide the image]. But no developer I’ve ever worked with has ever been willing to do that.”
“Sometimes, depending on the platform, it is a journey to find out where [the alt text] is.”
Developers can also make alt texts a better experience for both users and the people writing them by avoiding using images as much as possible in the code. Images can be used to create backgrounds and decorative designs, but much of that can be done programmatically as well.
“For decorative images, use CSS when possible,” Preston-Watson said. “Sometimes it’s not as simple as that, but if you have CSS, you really should use that for styling for your site.”
For example, buttons sometimes have images on them instead of words, like plus signs or check marks. Rather than using images, the same effect can be created with semantic buttons, which use CSS and jQuery code to create little decorative icons. Those changes would decrease the number of images on a page and take work off the plate of people writing alt text. It’s also better for users because there are fewer opportunities for errors.
Prioritize Accessibility Concerns
Many of these changes require a shift in priorities to direct the attention of developers toward accessibility concerns. That should happen on the company and management level, but also on the development level. In some companies, according to Strickland, accessibility testers get a lot of pushback from developers.
“All I got at the place I worked at before was pushback,” she said. “It was like, ‘We’ve been delivering for years without anybody having a problem with it.’ [But] do you hear from the people with disabilities who literally can’t access your site? … There’s a lot of people who don’t care about making things accessible.”
Preston-Watson said tools created for accessibility shouldn’t be co-opted for other purposes, like putting search words into alt text to try and increase search engine optimization.
“A lot of that advice is old-school advice,” she said. “It’s just a completely inaccessible experience … If I hear a bunch of random words, I’m navigating away.”
Strickland said the Microsoft OneNote project is a good example of how to make accessibility more central to the software development process. The development teams on that product incorporate accessibility into every part of the development and design process, including user research, usability testing and user acceptance testing. Companies should also recruit people with disabilities to do the testing and development, she said.
“Most importantly, hire them,” Strickland said. “Hiring them is the most effective way. Your goals are going to have to change and your processes are going to have to change — but that’s how you most understand how much of what you’ve been doing is currently excluding people.”