department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
284 stars 206 forks source link

Staging Review finding: Screenshots must have descriptive alternative text. #95787

Open shiragoodman opened 1 month ago

shiragoodman commented 1 month ago

Need help? Please review how to read a Staging Review ticket. Tag @platform-governance-team-members on Slack if you need further assistance.

Design System Staging Information

Component: Help users to... Know when their information is prefilled Staging Review ticket: AEDP, Design Patterns, Help users to... Know when their information is prefilled

Findings details

VA.gov Experience Standard - issue: User can't perceive an element. VA.gov Experience Standard - category: Comprehension This is an issue with the: High-priority: yes Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

You must provide alternative text that describes the content of an image, so that VFS team members who can't perceive an image visually will still be able to understand the information in the image. Currently, alt text is empty, just a restatement of the image caption, or not descriptive of the content displayed.

Recommended action

Good alt text for a screenshot is a bit of an art. It's different than what's in the image caption, and more of a literal description of what's in the image itself. But you don't need to describe everything in the image, just the parts that are contextually relevant.

For example, for the personal information page screenshot, I might write alt text like:

Veteran information page in a form flow with an uneditable card containing the Veteran's name, privacy masked Social Security number, date of birth, and gender. After the card is a note explaining why the content can't be edited and how to update this information.

Each screenshot must have text that's comparably descriptive included in the alt attribute of the img element.

References


Next Steps for DST

msbtterswrth commented 1 month ago

@ChristineRoseSteiffer could you look through the alt text for images and update them? If you need help writing the content lmk and I can help you out.