Leaflet/mapping accessibility

I’ve been experimenting with Leaflet accessibility (a11y) on CRP’s home page map and wanted to document some of my experience with that here.

This is related to issue #222

Leaflet

Their accessibility docs describe some features that come built into Leaflet. These are the map being keyboard navigable by default, and the strong recommendation to add alt attributes to markers.

From sifting through issues on Leaflet’s repo, I’ve found that there is a feature where polygons with tooltips are meant to have screen-readers read those tooltips as the shape's alt attribute. When testing with VoiceOver, it seemed like this feature was cumbersome. Each shape was read aloud as “graphics symbol” instead of something like “Fuller Park”. Through a series of commands, you can eventually get it to read the tooltip, but doing that for each area would be rough.

There is a possibility that this is a VoiceOver specific issue, but I’m unsure. I also tried adding an alt attribute to those polygons/shapes, but couldn't quite get that working.

General mapping

If your data was tabular to begin with, consider making that available for download or available for display on that or another page. This has the added benefit of sidestepping difficulties with making the map itself functionally accessible, since all the data will be present and digestible elsewhere.

And with CRP, the home page has a map with a little more than 77 elements that has to be tabbed through before users get to the content below. Skip blocks are normally recommended for elements that are repeated across multiple different pages (i.e nav bars). But in this case, I believe it would be a nice quality of life feature to add a skip block for this map, especially since it’s on the home page with content beyond it. This is implemented in this pr.

Next Steps

It would be great to test out another screen reader and see how that does with Leaflet's polygons and markers.

datamade / how-to