By CivicActions on

Alternative text is a complex topic, as it is difficult to account for every possible scenario or to provide sufficient context for each image. However, in order for web pages to be the most accessible, any contextual images that have been added must include good quality, descriptive alt text.  Our team was tasked with updating the image upload editorial interface within Drupal to help editors add better, more useful alt text for the images they were uploading. We completed a full, cross-disciplinary project with our partners Friends From The City and Agile Six. The project included discovery to determine exactly which areas would be best to focus on, building a functional prototype for user research, and ultimately implementing improvements determined from that research to create a better, more informed user interface for Drupal editors.

Visit VA.gov →
Why Drupal was chosen: 

Our goal was to create a better alt text experience for Veterans visiting VA.gov. To achieve this we had to improve the user interface within Drupal to:

  • Streamline and simplify the image upload form
  • Clearly identify the alternative text field
  • Add client-side validation for common errors seen within existing alt text
  • Provide clear and concise error messages for editors to correct mistakes
  • Educate editors on how to create descriptive and accurate alt text and why it is important
Describe the project (goals, requirements and outcome): 

Building on Drupal, an open-source content management system (CMS), we wanted to improve the image upload editorial interface by implementing guardrails to prevent poor quality alt text through the enforcement of accessibility best practices while also reducing frustrations for CMS editors who are writing the alt text - ultimately resulting in better quality alternative text for people who rely on it to access visual content on VA.gov.

Our team worked cross functionally with our partners to explore solutions that were not only technically feasible, but also solved a variety of user needs by following human centered design practices. Research was a key component to improving the alt text on VA.gov, from gathering and analyzing statistics on current alt text to conducting user research sessions. The final design that was implemented was a direct result of iteration based on user feedback and thought partnership with our team and the product owners at the VA.

Determine which metrics to target

The current alt text for images within Drupal was evaluated based on multiple criteria - did the alt text contain a filename; was the alt text concise; was the alt text redundant; was the alt text accurate. The last criterion is very contextual, however the first three are more subjective and we decided to target those metrics to start focusing our improvements. For just over a year (September 2022 - November 2023), the percentage of images violating each of the targeted criteria for alt text has remained mostly consistent.

Identify improvements

We created an interactive prototype to test with users. We analyzed the feedback from those research sessions to determine the best way to incorporate validation into the alt text field with the least amount of user disruption. We also determined additional user interface updates that would make the entire image upload experience a simpler and easier task for the editor.

The updated flow provides users an immediate error message if they input alt text that goes against any of the best practices that our team identified.

Educate Drupal editors

We created training articles within the Drupal Knowledge Base to help editors contextualize alt text and more fully understand what it is and why it is important. By helping editors understand the experience a Veteran might have if an image they upload has poor alt text, they will better understand the content they need to provide to improve this experience.

Technical specifications

Drupal version: 
Drupal 10.x
Organizations involved: 
CivicActions
Sectors: 
Government