Changes to Facility Locator search results for screen reader accessibility (longer term) #31714

[mmiddaugh]

Issue Description

During screenreader usability sessions, the meaning of the letter and number combo in search results (representing the map pin and the mileage) was not clear to Veterans. These Veterans were also not able to access the map, which might have provided a small context.

Current experience: When a user selects Facility type = Community Providers (in VA's network), the laundry list of options presented to users is confusing, particularly for those without visual cues.

@nicko-amida worked with the accessibility team on this feedback for Facility Locator search results - from the comment in [DESIGN] Screenreader users need context for relative location of FL search results (letter/number combo), #27452

Quick wins were addressed in separate issue (#31714) but a redesign of the results headings will help readability since screen readers move through results via headings

Recommended changes

• Consider including location marker and name of facility/specialist in the first heading
• Move mileage underneath first heading, as it own own line as a p element
• Use numbers instead of letters for location markers (see screenshot above) as using letters can introduce screen reader semantic confusion

Changes to other DOM elements

• Use oland li for search results list, rather than a series of div elements
• Screen readers read list elements more naturally, and will state where the result is in the context of the full list (ie. "One of forty-five")
• ol auto-adds numbers, which can be hidden with the sr-only class
• strong tag associate with mileage text isn't necessary
• Results pagination should be included as a nav landmarks

Next steps/recommendations

• Check with Content team about using a numbered results list: numbers may introduce semantic and/or connotative meaning that is not intended
• VSP Design office hours feedback for results heading updates
• Mockups and developer annotations for updated results cards

[laflannery]

Pulled out relevant information into new tickets for new Q2 2023 iteration work