Staging Review finding: Confusing image heading for screen reader users

shiragoodman commented 4 months ago

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

Product Information

Team: MHV-Medications Product: MHV Medications Feature: Medications

Findings details

VA.gov Experience Standard - issue: User can't perceive an element. VA.gov Experience Standard - category: Comprehension Launch-blocking: No Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

The medication detail pages (eg. /medications/prescription/[ID]) have a spot for images of the medication to appear --- but every medication I've checked with the test user has displayed an "Image not available" message. I'm interested in how you've implemented alt text for these images.

Update: Team provided an example medication with image and text description, so I was able to complete testing. Removing the launch-blocking label and updating the ticket with new notes.

As currently coded, the image is hidden from screen reader users using aria-hidden, but the H4 heading "Image" isn't. Screen reader users encountering that heading won't perceive any content following the heading, which may be interpreted as something being broken on the page or as though there's an image with useful information in it that's just coded inaccessibly.

Recommended action

No recommendation except that it would be good to test! Flagging as a potential issue, can either share more or close once I get a look at how you've done this.

Update: I'd recommend adding aria-hidden="true" to the H4, or alternatively wrapping both the H4 heading and the image inside a div that has aria-hidden="true" on it. The heading serves no purpose besides helping to find the image, so if the image is hidden it can be hidden as well.

References

Accessibility Defect Severity: 1: Critical. Must be fixed before launch.
WCAG Success Criteria: WCAG 1.1.1 Non-text Content - Level A
Modality: Screen reader
Design System Component: N/A
Design System Pattern or Template: N/A
Design System Foundation: N/A
Content Style Guide: N/A
Context: N/A

Next Steps for the VFS Team

[ ] Questions? For the most timely response, comment on Slack in your team channel tagging @platform-governance-team-members with any questions or to get help validating the issue.
[ ] Ticket ownership: If you believe that this issue is out of scope, not your team's responsibility, or a Design System issue, comment and tag @platform-governance-team-members on your team channel in Slack to provide an explanation and who you believe is responsible. The Governance team will follow up.
[ ] Close this ticket when the issue has been resolved or validated by your Product Owner.

kfink24 commented 4 months ago

@briandeconinck Medication name: SALICYLIC ACID 6% GEL 30 GM on page 4 has an image.

briandeconinck commented 4 months ago

Issue updated after testing the provided medication image. Thank you again for helping me check that so quickly!

IdeaTrail commented 4 months ago

Work will be done under Jira ticket: https://jira.devops.va.gov/browse/MHV-58774

IdeaTrail commented 4 months ago

Closing Github ticket. Tracking work under Jira ticket.

shiragoodman commented 4 months ago

Hi @IdeaTrail - I am reopening this issue as we kindly request that Staging Review tickets not be closed until the issue has been resolved. Please let me know if you have any questions - ty!

IdeaTrail commented 3 months ago

Work completed under ticket https://jira.devops.va.gov/browse/MHV-58774

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