Heatmap a11y issues

[jvine]

In all locations

1. The map itself gets keyboard focus, but has no label or focus outline, so it's a mystery stop.
   • add a focus outline to the same div that has tabindex=”0”
   • add aria-label=”heatmap” to the same div
   • identification will also be helped by exposed its <dt>, see Heatmap breaks metadata layout #1787

In search results

2. Keyboard gets to the list of titles, but the sidebar doesn’t open on keyboard focus - only when you click into the map. If you have SR on, you can hear the list of titles, but if you are just a keyboard user - you get a bunch of tabstops with no apparent content. (Gif at the bottom shows me tabbing through the titles. You can see the URL at the bottom left change, but no other indication that anything is changing.)

• open the sidebar when any item in it has keyboard focus

3. The keyboard can get to the zoom in/out buttons, but cannot pan the map. If Zoom takes the highlighted area outside the frame, too bad. I don’t know how to solve this one. Does leaflet has some kind of key combination pan feature?

4. For all users, there’s no pagination past the first 50 results. No way to close the side panel once it’s open. Frequently, the panel pushes the selected square out of view when it opens, changing or zeroing out the list of results. This feature in general has usability issues.

Individual result page

5. Marker is in the tab order, but has no action or information associated with it. Is it interactive in some contexts?
   

• The marker img is missing alt text, and is perceivable, so:
  • add alt=“location marker”

6. Outline is not in tab order. AMP reports it as an svg without a title, but it doesn’t seem to be perceived by the SR so I’m leaving it as is.
   

---

Tabbing without visual indicator (watch bottom left corner).

[mejackreed]

Some general things that can be done with regards to Leaflet default behavior.

WRT 3, By default the map is focusable and has existing keyboard controls.

+ Zoom in
- Zoom out
← Pan Left
→ Pan Right
↑ Pan Up
↓ Pan Down

This functionality can be disabled using https://leafletjs.com/reference-1.6.0.html#map-keyboard

WRT 5, we can add custom alt attribute info using https://leafletjs.com/reference-1.6.0.html#marker-alt

[mejackreed]

We want to supersede the search results and show page parts with #490 and #504 which have design needed.

[corylown]

We should check in with the Earthworks team about this.