Designing a workflow to use alt text & captions for accessibility

Increasing the value of images

In the years leading up to this project, Industry Dive's newsroom had focused on bringing more relevant, editorially-driven visuals to articles. There was also a broader company initiative to improve accessibility across our publication websites. These efforts set the stage for the next big improvement: adding descriptive alt text and captions to our article images.

Before this project, there was no way for an Industry Dive reporter or editor to add a caption or alt text to an article's main image. Without captions and image-specific alt text, readers were missing out on helpful context.
‍
This project took place before Industry Dive hired product managers, and as the sole product designer on this project, I was responsible for leading discovery, planning and conducting user research and testing sessions, and partnering with stakeholders in addition to leading the design.

Why alt text and captions?

Alt text is an accessibility feature that would ensure our readers, including those with visual impairments or other disabilities, had access to the information an image conveyed. If an image failed to load, alt text would help any reader understand the image’s intent, and it would also improve search engine rankings.

Image captions would 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 would make the image more relevant for readers.

An article before (left) and after (right) image captions were introduced.

Understanding newsroom image use

I started the project by researching caption and alt text best practices to better understand what requirements we would need to consider while designing. Based on that information, I established guidelines for the newsroom on how to write captions and alt text, which we didn’t previously have.

I 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 talked about their typical process when using images, the pain points they experience and their desired outcomes for this project.

Following the journalist interviews, I spoke with stakeholders to understand technical constraints and define success for this project. I also met with Industry Dive’s two accessibility workgroups to discuss the initiative and field questions and insights.

From this research, I learned:

• Reporters and editors wanted resources. They wanted guidance and training  to ensure they were using captions and alt text correctly.
• Captions are not essential for every image. Stock and product images don’t always need a caption. Because our publications cover niche industries, we often used these types of images. We would need to provide flexibility for all scenarios.
• We would need to make alt text required. It went 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 readers and journalists

Keeping these findings in mind, I 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.

I also facilitated user testing with the journalists I had interviewed to test the new workflow. 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.

Alt text and caption fields (left) were added to the CMS, as was a custom image caption field (right).

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, I 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. I 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.

Alt text is shown when an image hasn’t loaded properly.

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.

Results

Since rolling these changes out in August 2022, alt text and captions have become a core part of the editorial workflow. Of the nearly 100,000 images in the CMS, 31% of them had alt text and 7% had captions in January 2023.

These changes improved accessibility across our publication websites, made our images more relevant for our audience, reduced liability and ultimately, provided readers with greater context.