Designing a newsroom’s alt text and captions can be complicated. Here’s how we tackled it
How Industry Dive product designers delivered more context to readers through alt text and captions
Over the past few years, Industry Dive has made efforts to strengthen our editorial imagery and bring more relevant, interesting visuals to our journalism.
We’ve streamlined how we format image credits, created image guidelines to strengthen our brand, and hired our first Visuals Editor, among other endeavors.
This progress, coupled with an initiative to improve accessibility across our publication websites, set the stage for the next big improvement: adding descriptive alt text and relevant captions to our article images.
The value of alt text and captions
Image-specific alt text is an accessibility feature that ensures our readers, including those with visual impairments or other disabilities, have access to the information an image conveys. If an image fails to load, alt text helps any reader understand the image’s intent, and it also improves search engine rankings.
Image captions allow a journalist to relate an image to the story, provide additional information about a photo and indicate when a visual is specifically related to a story, all of which make the image more relevant for the reader.
Before this project, there was no way for an Industry Dive reporter or editor to add a caption to an article image, and there was no image-specific alt text associated with article images on our sites.
Without captions and image-specific alt text, readers were missing out on helpful context.
Understanding image use
We started the project by researching widely-used caption and alt text practices to better understand the project requirements and inform our design decisions. This helped us establish guidelines for the newsroom on how to write captions and alt text, which we didn’t previously have.
We also conducted interviews with four journalists from the newsroom, where each participant had varying levels of familiarity and experience with writing alt text and captions. In these interviews, we learned about their typical process when using images, the pain points they experience and their desired outcomes for this project.
Following the journalist interviews, we spoke with stakeholders to understand technical constraints and define success for this project. Additionally, we met with Industry Dive’s two accessibility workgroups to discuss our plans and field questions, suggestions and insights.
From this research, we learned:
Reporters and editors wanted resources. They desired guidance from internal documentation and newsroom training sessions to ensure they used captions and alt text correctly.
Captions are not essential for every image. Based on our research of other publishers, stock images or product images don’t always need a caption. In our design, we would need to provide flexibility for all scenarios.
We would need to make alt text required. It goes back to the piece about serving readers — we’re an organization whose mission is to inform our audience, so it’s especially important for our images to have image-specific alt text to ensure accessibility.
We needed a way to modify captions. When choosing an image for a story, there might be times when a caption is too general or the image context doesn’t match that of the article. Giving journalists a way to modify a caption and make it specific would help ensure our images are relevant for readers.
Designing for alt text and captions
Keeping these findings in mind, we designed a way to use captions and alt text on our publication websites and in our editorial workflow. This meant designing for the reader-facing side of our sites as well as our internal CMS.
Once we had initial mocks designed, we tested our designs with the journalists. This led to an overall simplification of the design solution.
In the end, we made the following design decisions:
Refined image input fields. Previously, when a reporter or editor uploaded a new image to the CMS, they were prompted to include a description of the image, but it was being used inconsistently. We replaced this field with a required alt text field and an optional caption field. We also added help text that provides guidance on what information to include for each field and links to best practices.
Moved existing image descriptions to the alt text field. There were already thousands of images in our CMS prior to this project, and we needed to determine what to do with the existing information. Because a majority of the image descriptions were not up to our new caption standards, we decided to pull them into the alt text field. This also gave us base image-specific alt text that we can go back to and improve.
Added a custom image caption field. This field, added to the article editing page in the CMS, allows a user to modify an image caption and make it specific to their story without changing the original caption. This allows captions to be tailored as needed.
Designed the reader-facing caption. On the reader-facing side, we designed what the captions would look like visually. We considered how the caption would look on different screen sizes, when used in our different templates, and with different amounts of information included. We then created a new component for our design system to standardize this work and ensure consistency in future initiatives.
Applied alt text to all image instances. As part of this project, we applied alt text to all journalistic image instances across our publication sites, including our news feeds, articles, footers, dashboards, carousels, 404 pages, etc. This makes our sites more accessible to readers.
Other smaller design decisions included creating an internal error message for missing alt text and making alt text and captions searchable in our image database.
These changes improve accessibility across our publication websites, make our images more relevant for our audience, and ultimately, provide readers with greater context.
