Open aklausmeier opened 3 months ago
During an accessibility audit of the Vet Center product, accessibility and design improvements were identified and have an opportunity to be improved across all facility types.
Just clarifying a couple of the bullets above:
- alt text should describe the map image not the purpose of the link
- map image link can stay, was considered for removal but no harm in keeping
IF the link on the map image remains, THEN the alt text must describe the purpose of that link. In which case it's going to be duplicative of the visible "Get directions" link already on the page.
IF we remove then link from the map image, THEN the alt text should describe the map as that is now the purpose of the image on the page.
@aklausmeier and I discussed and decided we should:
There's an additional report from VBA staging review in https://github.com/department-of-veterans-affairs/va.gov-team/issues/87429 that belongs in here, if we suss out how to address it.
Basically: the placement of the location and map images get disconnected from the address data depending on your zoom / screen size / if using a screen reader, because they're in a right column / floated right, and then get stacked. We need to find a way to keep them closer to address data in the markup.
In the "Location and contact information" section, here's where the images of the facility and the map are placed:
This potentially impacts users in a couple of ways:
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.
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.
Jut to clarify - the columns aren't floated. The columns display properly on all breakpoints <480 but on mobile (<481) the column containing the image and map is moved using the CSS order
property which breaks accessibility because it moves this visually but the DOM remains the same.
The options are:
Remove the order
property on mobile:
Duplicate the image/map, add it into the proper place in the DOM and only show the correct one on desktop/tablet/mobile:
Think mobile first. Find a solution where the image and map are in the mobile DOM order and that also works with Desktop
Description
During an accessibility audit of the Vet Center product and during VBA Regional office staging review, accessibility and design improvements were identified for the static locations map image, link, and zoom link/icon, that is used across all facility types.
Areas identified for improvement
VBA
e.g https://www.va.gov/portland-va-regional-benefit-office/
Markup screenshot
![Screenshot 2024-08-16 at 5 13 00 PM](https://github.com/user-attachments/assets/194d30bc-77bb-4543-bd44-6f1a13751fb6)Vet Center
https://www.va.gov/portland-or-vet-center/
Markup screenshot
![Screenshot 2024-08-16 at 5 13 51 PM](https://github.com/user-attachments/assets/76f7e6fb-5f8c-4633-82ea-37fad82e5bb5)VAMC
https://www.va.gov/minneapolis-health-care/locations/minneapolis-va-medical-center/
Markup screenshot
![Screenshot 2024-08-16 at 5 14 29 PM](https://github.com/user-attachments/assets/e9da4868-5d3e-48af-95b1-139de5327727)Engineering notes / background
Map image, alt text, and zoom icon are set here in a widget that's used across all facility types: https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/applications/static-pages/facilities/FacilityMapWidget.jsx#L67
Testing
Changes are made in one place that applies across many page types, and should be sanity checked in all instances to verify:
Acceptance Criteria
zoom_out_map
is removed and does not appear in markup