Staging Review finding: Image placement within document could be confusing for some users

[shiragoodman]

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: Sitewide Facilities
Product: VBA Regional Offices
Feature: Site Modernization

Findings details

VA.gov Experience Standard - issue: User encounters design components or patterns that are inconsistent or confusing.
VA.gov Experience Standard - category: Consistency
Launch-blocking: No
Design System review: No
Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

In the "Location and contact information" section, here's where the images of the facility and the map are placed:

• On desktop -- floated to the right, in close visual proximity to the facility address
• On mobile/at high zoom -- stacked above the "Address" H3, still in pretty close visual proximity
• Via a screen reader -- at the end of the "Location and contact information" after the "Office hours" section

This potentially impacts users in a couple of ways:

• For non-sighted screen reader users, they'll hear the alt text for the two images in a context that might be a little confusing, after all of the facility hours have been announced. I wouldn't expect most screen reader users to go searching for either image, but if they were to look for it, they wouldn't expect to find it under "Office hours."
• For partially-sighted screen reader users, you might listen to the page while tracking along visually (eg. some low-vision users might be able to perceive the section headings at high zoom but might rely on their screen reader for smaller text). As they track the flow of the text down the page, they track the flow of information down the page as it's announced, then get lost when the content being announced jumps up to the top of that section, then jumps down again to "Prepare for your visit."

The actual impact here is relatively minor --- the two images in the right-hand column aren't critical to understanding the page. But it's still a potential point of friction.

Link, screenshot or steps to recreate

The two-column layout is coded roughly as:

<h2 ...>
   Location and contact information
</h2>

<div ...>
   <div ...>
      [all of the text]
   </div>

   <div ...>
      [both images]
   </div>          
</div>

... with CSS stacking the second div on top of the first div for small viewports. Screen readers will read top to bottom regardless of CSS positioning.

Recommended action

Preferred option would be to explore some CSS layouts that keep the images in in the same chunk of content as the address and "Get directions on Google Maps" text. That's what they're most closely related to, that's where it makes sense for them to be.

Next-best option would be to flip the order:

<h2 ...>
   Location and contact information
</h2>

<div ...>
   <div ...>
      [both images]
   </div> 

   <div ...>
      [all of the text]
   </div>         
</div>

... with CSS to float the images to the right. It's not ideal but I think it would be an improvement overall. That would ensure the document order and screen reader experience would match the small viewport experience, and keep both of those images in pretty close proximity to their related content.

References

• Accessibility Defect Severity: 4: Low. Consider fixing or exploring in 2-4 sprints post-launch.
• WCAG Success Criteria: N/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.

[jilladams]

Tracking in department-of-veterans-affairs/va.gov-cms#18268