Features:
How to write effective alt text, for journalists
Describing images and charts for blind and low-vision users helps your journalism—on any platform—reach more people who need it
For journalists wanting to make their work accessible to people with disabilities, alt text is a great place to start. This short guide can help you think about how to add helpful alt text to images, charts & data visualizations, and social media posts for your newsroom.
What is alt text?
Alt text is text that describes the content of an image for a browser, and in turn, lets people who are blind or who have low vision get the same content, context, and information as other users. Content-management systems and social media platforms allow people to add alt text, and when an image has proper alt text, a browser can output it as speech or braille using screen-reading technology.
Without alt text, people using screen readers won’t know what is in an image. This means they miss out on memes, charts, maps, and other things that are widely shared on the Internet each day. Any time your publication publishes a tweet without alt text on the image, for example, it excludes people. Many organizations, in journalism and other industries, have failed to include blind and low-vision users when publishing and posting important COVID–19 stats, charts, and maps.
Alt text vs. captions for images
To be clear, alt text is not the same as a caption. A caption, particularly in the context of journalism, is used to supplement the information in a photo. The caption might tell you who is in the photo, the date the photo was taken, and where it was taken. Beyond that, journalism captions often try to give context by including quotes from someone in the photo, statistics, or other references to things not directly in the photo.
The traditional news caption does a good job of augmenting and adding context to an image. But a traditional news caption is never meant to stand in for a photo; it’s meant to be consumed in tandem. Alt text, however, is meant to be the stand-in for a photo. The alt text is what a person using a screen reader gets in place of the photo.
Imagine a photo of a person wearing a mask while walking down the street. The caption might tell you that a mask mandate was just lifted, or that X percent of the counties in the state still have mask mandates. That’s good for a caption! The alt text, though, should focus on what is actually in the photo: “A person wearing a mask while walking down the street.” Contextual statistics or quotes that don’t literally describe what’s in the image should be left out of alt text.
(An important thing to know: A screen reader will read both the alt text and the caption. Thus, if your CMS is set up to automatically use caption text for an image’s alt text, too, your users will hear the same text twice. If that’s the case, reach out to someone on your tech team to fix that.)
How detailed do I need to be?
The point of alt text is not to describe every single detail in an image, but to give users enough information about the image so they’re not missing out on the context. Alt text for an image of a football game need not try to describe the people in the crowd, unless there’s something about the crowd that’s relevant to the picture. Ask yourself why the image is on the page in the first place, and what is the vital information it provides for people who can see it. That will help you identify what details you need to put in the alt text and what information you can leave out.
Your challenge is to convey as much detail as you can, as succinctly as possible. Among people in the accessibility field, the target for alt text seems to be no more than 150 characters, if not shorter.
If an image is simply decorative and adds no content or information, then you can leave its alt text blank.
What about charts, maps and data visualizations?
Charts, maps, and data visualizations can be difficult. Your goal is to summarize the point as best as you can. Good alt text for a data visualization might look like:
- A line chart showing the number of reported Covid cases in Massachusetts since June 2021, with an upward spike in December 2021 and into January 2022
- A color-coded heat map of the U.S. shows that most of the cities that had record-breaking high temperatures in 2021 were in the Northwest
- A bar chart showing the annual U.S. production growth since 2018, where the growth in 2022 is predicted to be the highest since 2018
Below the image of the chart, you can also provide a table or list with more in-depth information. Or it might even be a longer paragraph that builds upon the short alt text you wrote for the image. (If you don’t write code, you can talk with a developer on your team about how you might add WAI-ARIA attributes that correlate the image to a data table, or a list.)
But for the alt text itself, the goal is to not describe every data point—you might not include numbers at all! The goal is to describe the main takeaway. Ask yourself what is the main message that a sighted user is getting from that chart or map, and use that to guide your alt text. If a more complicated explanation is necessary, it can go below the chart. (If you can work with a developer or engineer to use “aria-describedby” to connect the image with the explanation below the image, even better.)
For more guidance, check out:
- Amy Cesal’s medium post, “Writing Alt Text for Data Visualization”
- DataWrapper, How to write good alternative descriptions for your data visualization
Adding alt text on Twitter, Facebook, Instagram, WordPress
On the Twitter website, here’s how a sighted user would add alt text for an image:
- When you add the image, you’ll find a link that says “Add description.” Select that. (You can also get to this feature by selecting the “Edit” button, and you can select “Alt.”)
- That will open a text field where you can write your alt text.
- After you write your alt text, select the button that says “Save.”
- Then you can select the button that says “Tweet,” and you’ll send it out!
(If you’re using the Twitter app instead, after you add an image to a tweet you’ll notice a little button on it that says “+ALT”. Tap that to add your alt text.)
For more instructions on other platforms:
- How to add alt text to images on Facebook
- How to add alt text to images on Instagram
- How to add alt text to images on WordPress
- How to add alt text to images on Twitter
How do I make this a habit?
For individuals, you can leave yourself notes or alarms, whatever it is that you’ve found helps you remember important things to do. But for teams and newsrooms, adding alt text can only become a habit if everyone is trained on the process. Veterans, interns, new hires, and all people who contribute to publishing stuff on the web need to know how to add alt text in your CMS and on the publication’s social media profiles.
Individuals can help foster this, but your newsroom won’t truly embrace alt text if you don’t have managers willing to enforce this as a necessary part of the process. Management needs to offer reminders early and often. Each budget meeting should include an update on how well the publication did on alt text the day before. If your organization doesn’t have a Slack channel or Teams chat dedicated to accessibility, start one.
As newsrooms create long-overdue inclusion councils and diversity committees, they must focus on accessibility as part of their efforts. Otherwise, they’re merely performative allyship, not authentic diversity or inclusion. The CDC estimates that 26 percent of adults in the U.S. have some sort of disability. If you can’t think of them when you create your content, why should they pay for an inaccessible site?
Remember to ask yourself that, and that’s how you make it a habit.
More resources
If you’re interested in digging further into alt text, these are good resources:
Credits
-
Patrick Garvin
Patrick Garvin spent 15 years working in newsrooms at daily newspapers, including the Boston Globe, where he worked on information graphics and digital presentations. He now works as a front-end developer in St. Louis. He also teaches web design at the Missouri School of Journalism. He works with individuals and organizations to make their digital work more accessible for people with disabilities.