Web map tools WCAG 2.1 evaluation

A manual accessibility evaluation of popular web map tools.

Evaluation scope

This WCAG 2.1 evaluation is to assess the accessibility support of a basic web map from each of the web map tools as implemented by the W3C Maps for HTML Community Group.

The intention of this document is to get a broad sense for the accessibility support of the evaluated web map tools. The evaluation should not be considered complete, and the results of a given Success Criterion should not be interpreted as a comparison for accessibility support between the different web map tools.

Conformance results summary

Summary of the 14 evaluated WCAG Success Criteria:

A summary of this evaluation was also presented (video/slides) by Nic Chan at the 2020 W3C/OGC Joint Workshop Series on Maps for the Web.

Evaluated Success Criteria

1.1.1 Non-text Content (Level A)

Assessment

1. Identify all non-text content.
2. If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology (AT), (e.g. using aria-hidden="true").
3. If the non-text content is not intended as pure decoration, it has a text alternative.
4. If non-text content is a control or input, refer to the assessment of SC 4.1.2 Name, Role, Value for additional requirements.

If the requirements of step #2 and #3 are met Result is Pass, else Fail.

1.3.1 Info and Relationships (Level A)

Assessment

1. Verify that information (such as a control's state), structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

If requirements of step #1 is met Result is Pass, else Fail.

1.4.3 Contrast (Minimum) (Level AA)

Assessment

1. Verify that the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
   • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
   • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement;
   • Logotypes: Text that is part of a logo or brand name has no contrast requirement.

If requirements of check #1 is met Result is Pass, else Fail.

2.1.1 Keyboard (Level A)

Assessment

1. Identify all functionality of the web map.
2. Ensure all functionality can be accessed using only a keyboard.

If the requirements of step #2 is met Result is Pass, else Fail.

2.1.2 No Keyboard Trap (Level A)

Assessment

1. Sequentially navigate components using the tab key (and operate all controls).
2. Check that it is possible to tab or otherwise navigate away from each component using only the keyboard.

If the requirements of step #2 is met Result is Pass, else Fail.

2.1.4 Character Key Shortcuts (Level A)

Assessment

If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

1. Turn off: A mechanism is available to turn the shortcut off;
2. Remap: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. ctrl, alt, etc);
3. Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.

All the web maps that have shortcuts implemented fail both check #1 and #2.

If the requirements of check #3 is met Result is Pass, else Fail.

2.4.3 Focus Order (Level A)

Assessment

1. Determine the order of interactive elements.
2. Determine the logical order of interactive elements.
3. Check that the order of the interactive elements is the same as the logical order.

If the requirements of step #3 is met Result is Pass, else Fail.

(Note: This Success Criterion includes "Complementary screen reader output", the combination of screen readers/browsers tested is not comprehensive and different combinations may have different results. Also note that it appears NVDA is announcing some things twice, in most cases this is because a component has identical aria-label and title attribute values, in which case it is considered a bug to announce them both, see: nvaccess/nvda#7841. To work around the bug, the web map tool author could use <span title="" aria-hidden="true"> as a child element of the control instead.)

Web map tool	Result	Notes	Screenshot	Complementary screen reader output
Google Maps embed	Fail			ChromeVox (no announcement) "Terms of use link" "View larger map link" "Zoom in button" "Zoom out button" (no announcement) NVDA "Google Maps frame clickable" "Terms of use link" "clickable View larger map link" "Zoom in button Zoom in" "Zoom out button Zoom out" "clickable"
Google Maps Platform API	Fail			ChromeVox (no announcement) "Open this area in Google Maps, opens a new window link" "Terms of use link" "Toggle fullscreen view button" "Zoom in button" "Zoom out button" "Show street map button pressed" "Show satellite imagery button not pressed" NVDA "clickable" "Open this area in Google Maps, opens a new window link" "Terms of use link" "Toggle fullscreen view button toggle fullscreen view" "Zoom in button zoom in" "Zoom out button zoom out" "clickable Show street map toggle button pressed show street map" "clickable Show satellite imagery toggle button not pressed show satellite imagery"
Bing Maps embed	Pass			ChromeVox "Bing Maps interact to see more" "Current level 1 zoom in button" "Bing Maps link" "Terms link" NVDA "Bing Maps frame clickable Bing Maps interact to see more" "Current level 1 zoom in button zoom in" "Bing Maps link" "Terms link terms"
Bing Maps Control API	Pass			ChromeVox "Bing Maps interact to see more" "menu collapsed" "Locate me button" "Current level 1 zoom in button" "Bing Maps link" "Terms link" NVDA "clickable Bing Maps interact to see more" "Current map type: Road, view Aerial, Bird's Eye and more menu" "Locate me button locate me" "Current level 1 zoom in button zoom in" "Bing Maps link" "Terms link terms"
MapKit JS (Apple Maps) API	Pass			ChromeVox (no announcement) (no announcement) (no announcement) (no announcement) (no announcement) (no announcement) (The browser extension cannot read the Shadow DOM because shadowRoot.mode is closed.) NVDA "Change the map type button collapsed change the map type" "0 degrees 0 degrees slider N" "Zoom in button zoom in" "Zoom out button zoom out" "Legal button"
Leaflet JS API	Pass			ChromeVox "Zoom in zoom out Leaflet map data copyright OpenStreetMap contributors" "Zoom in button" "Zoom out button" "Leaflet link" "OpenStreetMap link" NVDA "clickable Zoom in zoom out Leaflet map data copyright OpenStreetMap contributors zoom in button zoom in zoom out button Zoom out clickable Leaflet link a JS library for interactive maps map data copyright OpenStreetMap link contributors" "Zoom in button zoom in" "Zoom out button zoom out" "clickable Leaflet link a JS library for interactive maps" "OpenStreetMap link"
OpenStreetMap embed	Pass			ChromeVox "Zoom in zoom out report a problem copyright OpenStreetMap contributors" "Zoom in button" "Zoom out button" "Report a problem" "OpenStreetMap" NVDA "OpenStreetMap frame clickable zoom in zoom out report a problem copyright OpenStreetMap contributors zoom in button zoom in zoom out button zoom out clickable report a problem link copyright OpenStreetMap link contributors" "Zoom in button zoom in" "Zoom out button zoom out" "clickable Report a problem link" "OpenStreetMap link"
OpenLayers API	Pass			ChromeVox "Plus button" "Minus button" "OpenStreetMap link list item-list with 1 items" NVDA "clickable Plus button zoom in" "button Zoom out" "list with 1 items OpenStreetMap link"
MapBox Studio embed	Pass			ChromeVox "Map" "Search edit text" "Zoom in button" "Zoom out button" "Reset bearing to north button" "MapBox logo link" NVDA "MapBox Studio frame clickable map graphic" "Search edit blank" "Zoom in button zoom in" "Zoom out button zoom out" "Reset bearing to north button reset bearing to north" "MapBox logo link"
MapBox GL JS API	Pass			ChromeVox "Map" "MapBox logo link" NVDA "clickable map graphic" "MapBox logo link"
TomTom Maps SDK for Web	Pass			ChromeVox "Map zoom in zoom out copyright 1992 to 2020 TomTom" "Map" "zoom in button" "zoom out button" NVDA "clickable map graphic zoom in button zoom in zoom out button zoom out clickable copyright 1992 to 2020 TomTom" (no announcement) "Zoom in button zoom in" "Zoom out button zoom out"

2.4.7 Focus Visible (Level AA)

Assessment

1. Sequentially navigate components using the tab key (and operate all controls).
2. Check that script is not used to remove focus and that each component is highlighted.

If the requirements of step #2 is met Result is Pass, else Fail.

2.5.5 Target Size (Level AAA)

Assessment

1. Identify targets for pointer inputs;
2. Verify that the size of each target is at least 44 by 44 CSS pixels except when:
   • Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
   • Inline: The target is in a sentence or block of text;
   • User Agent Control: The size of the target is determined by the user agent and is not modified by the author;
   • Essential: A particular presentation of the target is essential to the information being conveyed.

(Note: If you're a web map tool author wanting to conform to this SC, Lighthouse will flag targets that are smaller than 48 by 48 in CSS pixels as inappropriately sized.)

If requirements of check #2 is met Result is Pass, else Fail.

3.1.1 Language of Page (Level A)

This Success Criterion is only applicable to <iframe> embedded web maps. Refer to the assessment of SC 3.1.2 Language of Parts for establishing whether a human language can be programmatically determined for non embedded web maps.

Assessment

1. Check that the lang attribute is specified on the <html> element of the embedded document.
2. Ensure that the language code matches that of the content (which may change due to language negotiation, based on system settings).

If both step #1 and #2 is true Result is Pass, else Fail.

3.1.2 Language of Parts (Level AA)

Assessment

1. Check if the lang attribute is set, and the specified language code matches the language of the content (which may change due to language negotiation, based on system settings).

If step #1 is true Result is Pass, else Fail.

3.2.2 On Input (Level A)

Assessment

1. Change the setting of all components (e.g. pan and zoom the map display, change option in a drop-down menu, etc.).
2. Verify that there is no automatic change of context.

If step #2 is true Result is Pass, else Fail.

3.2.5 Change on Request (Level AAA)

Assessment

1. Verify that Changes of context are initiated only by user request or a mechanism is available to turn off such changes.

If requirements of step #1 is met Result is Pass, else Fail.

4.1.2 Name, Role, Value (Level A)

Assessment

For all user interface components:

1. The name and role can be programmatically determined;
2. states, properties, and values that can be set by the user can be programmatically set;
3. and notification of changes to these items is available to user agents, including assistive technologies.

If the requirements of all the above checks are met, Result is Pass, else Fail.

Other substantial accessibility issues

• Maps' content is almost never programmatically determinable and thus not available to users of assistive technology.
• Most controls (commonly <a role="button">) do not activate on both enter and space key presses (see WAI-ARIA Authoring Practices's recommended Keyboard Interactions for buttons).
• Majority of web maps don't present a fullscreen button by default.
• Not all web map container elements are focusable (and enclose all their components); tabbing to the web map's components does not guarantee the map display to be fully in the user's viewport.
• There's no way to pan the map displays using a single pointer gesture.
• Available keyboard shortcuts are not conveyed to the user.
• All web maps fail to display each discrete element (country boundaries, bodies of water, roads etc.) in sharp contrast to each other (SC 1.4.11 Non-text Contrast), and none of the web maps support high contrast mode.

Issue reporting

This document may include links to existing Github issues/PRs pertaining to a particular failure of a Success Criterion, however, it will not be updated to reflect any such fixes.

Additionally, this evaluation was reported to the web map tools' authors for awareness:

• Google Maps: https://issuetracker.google.com/issues/69541792#comment37
• Bing Maps: https://social.msdn.microsoft.com/Forums/en-US/48cac514-03ba-49d7-a91b-de9a066bb5d8/accessibility-evaluation-wcag-21?forum=bingmaps
• MapKit JS (Apple Maps): https://developer.apple.com/forums/thread/674971
  • DuckDuckGo Maps: duckduckgo/community-platform#1531
• OpenLayers: openlayers/openlayers#11678
• OpenStreetMap: https://lists.openstreetmap.org/pipermail/accessibility/2020-October/000421.html
• MapBox: mapbox/mapbox-gl-js#9991
  • MapLibre: maplibre/maplibre-gl-js#53
• TomTom Maps: https://devforum.tomtom.com/t/accessibility-evaluation-wcag-2-1/1400