UI patterns in existing web map widgets

Nic Chan

24 September 2020
W3C/OGC Joint Workshop Series on Maps for the Web
w3.org/2020/maps/

Definitions

Widgets: An embeddable map, typically in an iframe or something similar that requires minimal code to implement.
Client-side Mapping APIs: JavaScript Libraries that allow website developers to create more customized map viewers.
Accessibility: The degree to which these maps are usable by disabled people.
WCAG (Web Content Accessibility Guidelines): A series of guidelines by the W3C in order to provide a shared standard for developing accessible web content.

Tools Reviewed

Google Maps embed
Google Maps API
Bing Maps embed
Bing Maps Control API
MapKit JS (Apple Maps) API
Leaflet JS API
OpenStreet Map Embed
OpenLayers API
MapBox Studio embed
MapBox GL JS API
TomTom Maps SDK for Web

https://tinyurl.com/wcag-maps by Robert Linder

Non-text Content

5/11 tools failed

Unlabelled images (ie. logo)
Unlabelled controls (icon buttons +/-)

Example techniques


        <img src="logo.svg" alt="[Vendor] Logo">


        <button aria-label="Zoom In">+</button>

Info & Relationships

11/11 tools failed

Failure to label map's structure as a distinct piece of content
Failure to distinguish control states

Example technique


        <button aria-label="Zoom In" disabled>+</button>

Contrast (minimum)

Map library that has lacking contrast between the medium blue text label and the light blue ocean background

9/11 tools failed

Map controls (ie. buttons) can lack text contrast
More commonly, map labels lack adequate text contrast

Keyboard

7/11 tools failed

Custom map controls may not able to be accessed or activated by the keyboard
Pointer gestures should have equivalent keyboard shortcuts


        <-- Use this --> 

        <button>Please just style me</button>

        <-- Not this --> 

        <a href="#">I'm not a button, I'm a link!</a>

Character Key Shortcuts

1/11 tools failed

If a keyboard shortcut is implemented in content using only letter, punctuation, number, or symbol characters, then one of these alternatives must available:

Turn off
Remap
Active only on focus. This technique is the de-facto standard in web maps.

Focus Order

2/11 tools failed

Interactable elements should be focusable according to the reading order.

Focus Order Example

"Google Maps Frame"
"Terms of Use link"
"View Larger Map link"
"Zoom in button"
"Zoom out button"
"Clickable"

Focus Visible

Google Maps and the default Chrome focus ring

7/11 tools failed

Do not remove outlines in CSS (avoid outline: none) without replacing them with your own styles
Outlines must be persistently visible

Language of parts

9/11 tools failed

Content should have a lang attribute.


        <-- Parent level language --> 

        <html lang="en"> 


        <-- String level language --> 

        <span lang="zh">香港</span>

On Input

2/11 tools failed

Tomtom maps page scrolls as you try pan the map with arrow keys

Thank you!

nic@nicchan.me

24 September 2020
W3C/OGC Joint Workshop Series on Maps for the Web
w3.org/2020/maps/