search

sul-dlss / exhibits

Stanford University Libraries online exhibits showcase
https://exhibits.stanford.edu
Other
19 stars 7 forks source link

Heatmap a11y issues #1813

Open jvine opened 4 years ago

jvine commented 4 years ago

In all locations

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

In search results

  1. 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

  2. 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?

  3. 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

  1. Marker is in the tab order, but has no action or information associated with it. Is it interactive in some contexts? Screen Shot 2020-02-28 at 5 03 18 PM
  1. 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. Screen Shot 2020-02-28 at 5 01 16 PM

Tabbing without visual indicator (watch bottom left corner).

leaflet

mejackreed commented 4 years ago

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 commented 4 years ago

We want to supersede the search results and show page parts with https://github.com/sul-dlss/exhibits/issues/490 and #504 which have design needed.

corylown commented 2 months ago

We should check in with the Earthworks team about this.