compliance with WCAG about mapbox-gl-accessibility

[andrewharvey]

I've never had someone put their Mapbox map through a compliance test, and it's never been a strict compliance issue so far. That said WCAG 2.0 compliance is in theory something that for a lot of customers need to meet. Only usually to AA (the three levels are A, AA, and AAA).

The focus is usually around ensuring the content typically shown on top of the map (like markers, symbols etc) is accessible rather than the actual "basemap" map.

At a high level the focus is usually

• text alternatives for non-text content / screen reader support
• interaction without a mouse
• map style/visual (use of colour, contrast, symbol size...)

This is typically achieved with:

• aria-label, alt, title provide a text alternative, GL JS does have these set for the controls
• depending on how your map appears inside a page, you can use a figure with figcaption to provide a text based alternative of what the map is of, eg. "Map of Washington DC showing bike rental locations"
• list of markers outside the map, eg.
  
• giving an address as an alternative to showing the location on a map with the reverse geocoder
• markers can have an text alternative set, and symbols can with mapbox-gl-accessibility (draws invisible markers on top of the symbols)
• providing an alternate map style that uses shape or texture instead of colour to distinguish different elements (whether that's markers, symbols, lines or fills on the map)
• providing an alternate high contrast map style
• text resizing (although a map at 200% browser zoom is okay, it might be better to have an option to dynamically upsize all text/icons on the map)
• making everything keyboard accessible-
• all the mouse interactions to pan, zoom, rotate, pitch are by default possible with the keyboard in GL JS
• any on('click') interaction can use mapbox-gl-accessibility to provide a DOM element which can be clicked with the keyboard
• mapbox-gl-accessibility sets the tabindex so you can tab through elements to click, but you may need to ensure you do this on your own if you use a normal Marker
• no flashes (a bug which caused flashes was recently fixed in GL JS, but I'm not sure if tiles loading into view are considered a flash
• the keyboard focus indicator should be visible (you'll likely need to set your own :focus css)
• use the lang tag if the language for the text differs from the lang set for the page, I think this is something mapbox-gl-accessibility could do
• abbreviations, mapbox-gl-accessibility could expand out "Main St" to "Main Street" for the text alternative

[mikelmaron]

@andrewharvey what is your take on how WCAG applies for interactive maps?