The U.S. Department of Veterans Affairs (VA)
When we think of accessibility, we often picture the external end-user experience of a product or service. However, an often overlooked aspect of human-centered design (HCD) is ensuring that the people responsible for developing accessible products are equipped with the right tools and knowledge. This is especially true for VA.gov editors, who need to understand how to input alt text in a content management system (CMS) to directly impact the website's accessibility and usability for all visitors. Alternative text (alt text) is crucial for conveying the content and function of images to individuals who are visually impaired or have difficulty seeing certain types of content. Given that VA.gov serves a diverse and often vulnerable population of Veterans, ensuring that all users can fully access and understand the information on the site is paramount.
Properly implemented alt text boosts the site's search engine optimization (SEO). This makes content more discoverable and improves the overall user experience. Moreover, an editor’s confidence in using the CMS to add alt text allows them to create and maintain accessible content effectively, further fulfilling the VA's commitment to inclusivity and compliance with web accessibility standards. This case study demonstrates how we gathered feedback from VA.gov editors on a new alt-text enhancement feature to identify needed adjustments before its launch.
After conducting several audits of the alt text in the Drupal CMS, it became clear there was significant room for improvement. Specifically, the alt text descriptions created by VA editors could be more concise and accurate by avoiding unnecessary file extensions and redundant phrases such as "image of" or "photo of," considering screen readers automatically convey this information.
However, creating accurate alt text is not intuitive, particularly for editors who lack experience in writing plain, accessible language for the web. This challenge is further compounded when editors are not confident in using a CMS like Drupal.
Our challenge was to align the VA.gov CMS editors' varying levels of accessibility knowledge with the VA’s goal of a fully inclusive website. We needed to find a way to bridge the gaps in their experience, knowledge, and confidence. Additionally, the alt text enhancement feature had to ensure a smooth, standardized, and informative experience for screen reader users across all VA.gov pages.
Gather Data
Over several months, we conducted audits of alt text within the CMS. To gauge the quality of the alt text, we used the following criteria:
Our findings revealed that redundancies remained high month after month, with over 65% of alt text containing redundant phrases and about 20% of alt text including file extensions. These issues remained consistent over the course of a year.
.png)
Propose New Design
To address the recurring issues, the team decided to highlight these best practice violations more prominently. We proposed displaying specific error messages whenever the alt text contained a redundancy, a file extension or exceeded 150 characters. Our UX Designer created an interactive prototype in Figma to demonstrate this new workflow.
.png)
Test Prototype
We conducted five 60-minute moderated research sessions via Zoom. Participants compared the current alt text creation experience in the Drupal CMS to a new alt text creation experience, presented through a clickable prototype. In the current Drupal CMS (using the training environment), participants uploaded an image and added alt text while narrating their thoughts, confusions, and questions.
Next, participants interacted with the prototype, which introduced specific error messages for best practice violations, such as exceeding 150 characters, using the image file name, or including words like “image of” in their alt text.
Afterward, participants reflected on which experience (the current Drupal environment or the prototype) better supported them in creating alt text and suggested improvements to enhance the process further.
This is a phenomenal catch… I think something like this is a game changer. - VAMC editor
Based on feedback from our testing sessions, we determined that the prototype's design effectively helps editors write higher-quality alt text by including descriptive error messages during the creation process.
Additionally, we discovered that some editors lacked an understanding of alt text’s importance and relevance. To address this, we developed comprehensive and educational Knowledge Base articles for their reference.
The first iteration of this feature went live in February 2024. The team is closely monitoring its impact through logs that track every error made and the contents of the alt text before the error message is triggered.
Contributor: Joann Agnitti, Sr. UX Researcher
