[Maps] (Accessibility) Maps

[myasonik]

Opening up this issue mostly for discussion on ways we can improve the accessibility of maps in Kibana.

3 wide areas we can look at (ordered by difficulty):

• color contrast levels
• keyboard accessibility
• screen reader accessibility

Keyboard accessibility is probably the most straight forward and has its own issue.

Color contrast should also hopefully be resolvable. Hardest part here is depending on screen size, text can overlap different elements so the colors will have to be far enough apart to not have an issue no matter what they're paired with.

Screen reader accessibility is probably the hardest and I'm all ears to any thoughts or suggestions. Would be a really cool start if we could call out what [largest groupable region] is currently shown (e.g., if multiple countries are visible, a screen reader could read "a map of the United States, Canada, and Mexico" or if we're zoomed further in and just multiple cities are visible it could read "a map of San Francisco, CA, Oakland, CA, and Berkley, CA").

[elasticmachine]

Pinging @elastic/kibana-gis (Team:Geo)

[thomasneirynck]

@myasonik wrt color contrast, are you referring to the colors of the UX elements, or the colors on the map itself?

[myasonik]

The map itself

[thomasneirynck]

@jsanz @nickpeihl @miukimiu Do you know anything more about creating a map-style optimized for color-impaired users? I have no experience with this.

@myasonik Maps already has a few different styles for the base-maps (default, desaturated, dark). The dark-theme has high contrasts between features/labels and background. Is that more readable for color-impaired users?

[thomasneirynck]

Would be a really cool start if we could call out what [largest groupable region] is currently shown (e.g., if multiple countries are visible, a screen reader could read "a map of the United States, Canada, and Mexico" or if we're zoomed further in and just multiple cities are visible it could read "a map of San Francisco, CA, Oakland, CA, and Berkley, CA").

whoa :) That does sound fairly advanced. I am not familiar with any approaches here wrt screen-readers. @jsanz have you seen anything like it?

[myasonik]

Will do some contrast testing of the themes and post back here when I have more details.

Was just turning over this problem in my head and though to check what Google Maps does. I had never before played with Google Maps accessibility work but it actually works pretty similarly to my idea. The thing that might be harder still than reading out the areas in view, is being able to read out the data that's being presented on the map but one problem at a time.

Here are their docs on it: https://support.google.com/maps/answer/6396990

If you need help running through it with a screen reader, I'm happy to demo.

[nickpeihl]

I've put up a repository/website where we can test changes such as colors and styles of layers in the basemaps.

Changes made in the web editor are preview-able only in the individual user's web browser and do not affect the production basemaps (changes are saved to local storage). Changes can be saved to a JSON file which can be sent to others to review.

I do not have much experience working with accessible maps, but the editor does have a built in simulator for different types of colorblindness (select menu next to "View" at the top of the page).

The interface may be a little daunting, and I'd be happy to work with the Design team for more accessible colors and styles.

[myasonik]

@cchaos Is this something you could help with? I think you have the most experience with our color palette.

I haven't had a chance to actually profile the color contrast of different elements but I've personally had trouble with some of the text when it overlays water so I'm going to guess that the contrast is a problem (at least in areas).

Could also be neat to actually integrate our colors into this instead of random (I'm guessing?) map colors.

[jsanz]

@jsanz @nickpeihl @miukimiu Do you know anything more about creating a map-style optimized for color-impaired users? I have no experience with this.

@thomasneirynck me either, we could do some research, there has to be quite a lot of literature on the topic.

I've put up a repository/website where we can test changes such as colors and styles of layers in the basemaps.

For clarity, @nickpeihl points us to https://elastic.github.io/ems-basemap-editor/ where you can use the Open button where you can select any of our EMS styles and then play with the different selectors from View to see how the style would be perceived for different conditions. This is great Nick!! :raised_hands:

Would be a really cool start if we could call out what [largest groupable region] is currently shown (e.g., if multiple countries are visible, a screen reader could read "a map of the United States, Canada, and Mexico" or if we're zoomed further in and just multiple cities are visible it could read "a map of San Francisco, CA, Oakland, CA, and Berkley, CA").

whoa :) That does sound fairly advanced. I am not familiar with any approaches here wrt screen-readers. @jsanz have you seen anything like it?

Nope, it seems quite interesting and it shouldn't hard to implement a service that given a bounding box provides some sort of textual representation using place names (like a low-level reverse-geocoding based in a bbox instead of a pair of coordinates) and then puts that text somewhere a screen reader can use to help the user.

Still, this would be of little help if we don't do the same for the overlay data we render on top of the basemap. To be honest, I don't know any map provider with this level of accessibility, but again, we could do some research, feels like something would be very generic and could be contributed as a MapboxGL plugin.

[myasonik]

Looks like mapbox already has an a11y plugin started!

It takes a slightly different approach it looks like though. Instead of providing some sort of "viewing" box that gets read out, it makes the point on the map interactive with a keyboard. (Just judging by the demo, I didn't dig into the code.) I think that could also work for us where the data that's being overlayed could become interactive (though we'd probably also want to still give context about what the base map is as well).

[jsanz]

Sharing here a good resource on color schemes that are friendly for color blind people, there is this paper that was implemented in the safe color scheme in the CARTO Colors palettes.

[myasonik]

Sorry y'all. I haven't forgotten about this and know there are some things I owe y'all to move forward but haven't had the time to dig into this at the moment.

Anyways, just leaving this article about maps accessibility here for future us to look at: https://developer.paciellogroup.com/blog/2020/04/accessible-digital-map-experiences/

[jsanz]

Leaving here a resource recently published by Esri on accessibility for basemaps

https://www.esri.com/arcgis-blog/products/arcgis-living-atlas/mapping/towards-an-accessible-basemap/

cc. @kmartastic

[jsanz]

Sharing a new resource on accessibility for Mapbox/Maplibre

https://texturemap.org/ | https://github.com/azavea/texturemap

Textures, patterns, and shapes that make web maps work for people with color vision deficiency. Built for Mapbox GL and MapLibre GL.

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)