Skip to content
/ web-maps-wcag-evaluation Public

Manual accessibility evaluation of popular web map tools.

37 stars 4 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Malvoz/web-maps-wcag-evaluation

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
images
images
 
 
README.md
README.md
 
 

Repository files navigation

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.

Evaluated web map tools
Environment and tools used in the evaluation

Conformance results summary

Summary of the 14 evaluated WCAG Success Criteria:

Web map tool Total Level A Level AA Level AAA
Failed Applicable Failed Applicable Failed Applicable Failed Applicable
Google Maps embed 11 13 6 8 3 3 2 2
Google Maps Platform API 10 13 6 8 2 3 2 2
Bing Maps embed 5 14 2 9 1 3 2 2
Bing Maps Control API 7 13 3 8 2 3 2 2
MapKit JS (Apple Maps) API 8 12 4 7 2 3 2 2
Leaflet JS API 6 13 2 8 3 3 1 2
OpenStreetMap embed 8 14 3 9 3 3 2 2
OpenLayers API 8 13 4 8 2 3 2 2
MapBox Studio embed 6 14 3 9 1 3 2 2
MapBox GL JS API 7 13 3 8 2 3 2 2
TomTom Maps SDK for Web 9 13 5 8 3 3 1 2

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

Jump to Success Criterion

Perceivable

Operable

Understandable

Robust

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.

Web map tool Result Notes
Google Maps embed Fail The image depicting "Google" (logo) is neither hidden from ATs nor has a text alternative.
Google Maps Platform API Fail The link that opens a new window to view the current location (in "Street view") is visually presented as an icon, but is missing a text alternative.
Bing Maps embed Pass
Bing Maps Control API Pass
MapKit JS (Apple Maps) API Fail The control to change/reset the bearing has a child node with the text character "N" to convey "North", it is presumably decorative but is not hidden from ATs.
Leaflet JS API Pass
OpenStreetMap embed Pass
OpenLayers API Fail Characters "+" and "−" of the zoom controls are decorative but are not hidden from ATs. [Github issue]
MapBox Studio embed Pass
MapBox GL JS API Pass
TomTom Maps SDK for Web Fail Character "×" of the control to close the copyright message dialog is decorative but is not hidden from ATs.

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.

Web map tool Result Notes
Google Maps embed Fail The zoom controls' disabled state cannot be programmatically determined.
Google Maps Platform API Fail
  • The web map's semantic structure as a distinct piece of content cannot be programmatically determined.
  • The zoom controls' disabled state cannot be programmatically determined.
  • The fullscreen control's pressed state cannot be programmatically determined.
Bing Maps embed Fail Scale bars/rulers are missing contextual information (alternatively should be hidden from ATs).
Bing Maps Control API Fail
  • The web map's semantic structure as a distinct piece of content cannot be programmatically determined.
  • Scale bars/rulers are missing contextual information (alternatively should be hidden from ATs).
  • The "Reset orientation" control's disabled state cannot be programmatically determined.
  • The "Locate me" control's pressed state cannot be programmatically determined.
MapKit JS (Apple Maps) API Fail The web map's semantic structure as a distinct piece of content cannot be programmatically determined.
Leaflet JS API Fail
  • The web map's semantic structure as a distinct piece of content cannot be programmatically determined. [Github issue]
  • The zoom controls' disabled state cannot be programmatically determined. [Github issue]
OpenStreetMap embed Fail The zoom controls' disabled state cannot be programmatically determined.
OpenLayers API Fail
  • The web map's semantic structure as a distinct piece of content cannot be programmatically determined. [Github issue]
  • The zoom controls' disabled state cannot be programmatically determined. [Github issue]
MapBox Studio embed Fail The "Zoom out" control's disabled state cannot be programmatically determined. [Github PR]
MapBox GL JS API Fail The web map's semantic structure as a distinct piece of content cannot be programmatically determined.
TomTom Maps SDK for Web Fail
  • The web map's semantic structure as a distinct piece of content cannot be programmatically determined.
  • The zoom controls' disabled state cannot be programmatically determined.

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.

Web map tool Result Notes
Google Maps embed Fail The "View larger map" link has a contrast ratio of 3.79. Some map text (i.e. ocean labels) do not mean the minimum contrast ratio.
Google Maps Platform API Fail The "View larger map" link has a contrast ratio of 3.79. Some map text (i.e. ocean labels) do not mean the minimum contrast ratio.
Bing Maps embed Fail Some map labels (i.e. bodies of water, district labels) do not meet the minimum contrast ratio.
Bing Maps Control API Fail Some map labels (i.e. bodies of water, district labels) do not meet the minimum contrast ratio.
MapKit JS (Apple Maps) API Fail Some map labels (i.e. bodies of water, minor street labels) do not meet the minimum contrast ratio.
Leaflet JS API Fail Some map labels (i.e. regional/districts) do not meet the minimum contrast ratio (uses OpenStreetMap tiles).
OpenStreetMap embed Fail Some map labels (i.e. regional/districts) do not meet the minimum contrast ratio (uses OpenStreetMap tiles).
OpenLayers API Fail Some map labels (i.e. regional/districts) do not meet the minimum contrast ratio (uses OpenStreetMap tiles).
MapBox Studio embed Pass
MapBox GL JS API Pass
TomTom Maps SDK for Web Fail Some map labels (i.e. buildings) do not meet the minimum contrast ratio.

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.

Web map tool Result Notes
Google Maps embed Fail
  • Map display is not pannable using a keyboard.
  • Control to toggle between "Satellite imagery" and "Street map" is not keyboard operable.
Google Maps Platform API Fail
  • Control to initiate "Street view" (so called "Pegman") is only draggable using a mouse, and not keyboard operable.
  • The "Labels" toggle is only accessible in a drop-down after hovering a mouse pointer over the "Satellite" button.
  • The "Terrain" toggle is only accessible in a drop-down after hovering a mouse pointer over the "Map" button.
  • Control to exit "Street view" (<div jsaction="closeControl.click">) is not keyboard operable.
Bing Maps embed Pass
Bing Maps Control API Fail Control to toggle area labels under "Bird's Eye view" is not keyboard accessible (has tabindex="-1").
MapKit JS (Apple Maps) API Fail Map display is not pannable using a keyboard.
Leaflet JS API Pass
OpenStreetMap embed Pass
OpenLayers API Pass
MapBox Studio embed Fail Control to display attribution and feedback links is not keyboard accessible. [Github PR]
MapBox GL JS API Fail Control to display attribution and feedback links is not keyboard accessible. [Github PR]
TomTom Maps SDK for Web Fail
  • Control to open the copyright message dialog is not keyboard accessible.
  • Control to close the copyright message dialog is not keyboard accessible.

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.

Web map tool Result Notes
Google Maps embed Pass
Google Maps Platform API Pass
Bing Maps embed Pass
Bing Maps Control API Pass
MapKit JS (Apple Maps) API Pass
Leaflet JS API Pass
OpenStreetMap embed Pass
OpenLayers API Pass
MapBox Studio embed Pass
MapBox GL JS API Pass
TomTom Maps SDK for Web Pass

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.

Web map tool Result Notes
Google Maps embed N/A (No single key shortcuts available.)
Google Maps Platform API Pass
Bing Maps embed Pass
Bing Maps Control API Pass
MapKit JS (Apple Maps) API N/A (No single key shortcuts available.)
Leaflet JS API Pass
OpenStreetMap embed Pass
OpenLayers API Fail Both the arrow keys (used to pan the map display) as well as the keyboard shortcuts + and - (to zoom) can be activated despite unrelated components having focus.
MapBox Studio embed Pass
MapBox GL JS API Pass
TomTom Maps SDK for Web Pass

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 Google Maps embed focus order
ChromeVox
  1. (no announcement)
  2. "Terms of use link"
  3. "View larger map link"
  4. "Zoom in button"
  5. "Zoom out button"
  6. (no announcement)
NVDA
  1. "Google Maps frame clickable"
  2. "Terms of use link"
  3. "clickable View larger map link"
  4. "Zoom in button Zoom in"
  5. "Zoom out button Zoom out"
  6. "clickable"
Google Maps Platform API Fail Google Maps API focus order
ChromeVox
  1. (no announcement)
  2. "Open this area in Google Maps, opens a new window link"
  3. "Terms of use link"
  4. "Toggle fullscreen view button"
  5. "Zoom in button"
  6. "Zoom out button"
  7. "Show street map button pressed"
  8. "Show satellite imagery button not pressed"
NVDA
  1. "clickable"
  2. "Open this area in Google Maps, opens a new window link"
  3. "Terms of use link"
  4. "Toggle fullscreen view button toggle fullscreen view"
  5. "Zoom in button zoom in"
  6. "Zoom out button zoom out"
  7. "clickable Show street map toggle button pressed show street map"
  8. "clickable Show satellite imagery toggle button not pressed show satellite imagery"
Bing Maps embed Pass Bing Maps embed focus order
ChromeVox
  1. "Bing Maps interact to see more"
  2. "Current level 1 zoom in button"
  3. "Bing Maps link"
  4. "Terms link"
NVDA
  1. "Bing Maps frame clickable Bing Maps interact to see more"
  2. "Current level 1 zoom in button zoom in"
  3. "Bing Maps link"
  4. "Terms link terms"
Bing Maps Control API Pass Bing Maps API focus order
ChromeVox
  1. "Bing Maps interact to see more"
  2. "menu collapsed"
  3. "Locate me button"
  4. "Current level 1 zoom in button"
  5. "Bing Maps link"
  6. "Terms link"
NVDA
  1. "clickable Bing Maps interact to see more"
  2. "Current map type: Road, view Aerial, Bird's Eye and more menu"
  3. "Locate me button locate me"
  4. "Current level 1 zoom in button zoom in"
  5. "Bing Maps link"
  6. "Terms link terms"
MapKit JS (Apple Maps) API Pass MapKit JS Apple Maps API focus order
ChromeVox
  1. (no announcement)
  2. (no announcement)
  3. (no announcement)
  4. (no announcement)
  5. (no announcement)
  6. (no announcement)

(The browser extension cannot read the Shadow DOM because shadowRoot.mode is closed.)

NVDA
  1. "Change the map type button collapsed change the map type"
  2. "0 degrees 0 degrees slider N"
  3. "Zoom in button zoom in"
  4. "Zoom out button zoom out"
  5. "Legal button"
Leaflet JS API Pass Leaflet JS API focus order
ChromeVox
  1. "Zoom in zoom out Leaflet map data copyright OpenStreetMap contributors"
  2. "Zoom in button"
  3. "Zoom out button"
  4. "Leaflet link"
  5. "OpenStreetMap link"
NVDA
  1. "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"
  2. "Zoom in button zoom in"
  3. "Zoom out button zoom out"
  4. "clickable Leaflet link a JS library for interactive maps"
  5. "OpenStreetMap link"
OpenStreetMap embed Pass OpenStreetMap embed focus order
ChromeVox
  1. "Zoom in zoom out report a problem copyright OpenStreetMap contributors"
  2. "Zoom in button"
  3. "Zoom out button"
  4. "Report a problem"
  5. "OpenStreetMap"
NVDA
  1. "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"
  2. "Zoom in button zoom in"
  3. "Zoom out button zoom out"
  4. "clickable Report a problem link"
  5. "OpenStreetMap link"
OpenLayers API Pass OpenLayers API focus order
ChromeVox
  1. "Plus button"
  2. "Minus button"
  3. "OpenStreetMap link list item-list with 1 items"
NVDA
  1. "clickable Plus button zoom in"
  2. "button Zoom out"
  3. "list with 1 items OpenStreetMap link"
MapBox Studio embed Pass MapBox Studio embed focus order
ChromeVox
  1. "Map"
  2. "Search edit text"
  3. "Zoom in button"
  4. "Zoom out button"
  5. "Reset bearing to north button"
  6. "MapBox logo link"
NVDA
  1. "MapBox Studio frame clickable map graphic"
  2. "Search edit blank"
  3. "Zoom in button zoom in"
  4. "Zoom out button zoom out"
  5. "Reset bearing to north button reset bearing to north"
  6. "MapBox logo link"
MapBox GL JS API Pass MapBox GL JS API focus order
ChromeVox
  1. "Map"
  2. "MapBox logo link"
NVDA
  1. "clickable map graphic"
  2. "MapBox logo link"
TomTom Maps SDK for Web Pass TomTom Maps SDK for Web focus order
ChromeVox
  1. "Map zoom in zoom out copyright 1992 to 2020 TomTom"
  2. "Map"
  3. "zoom in button"
  4. "zoom out button"
NVDA
  1. "clickable map graphic zoom in button zoom in zoom out button zoom out clickable copyright 1992 to 2020 TomTom"
  2. (no announcement)
  3. "Zoom in button zoom in"
  4. "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.

Web map tool Result Notes
Google Maps embed Fail 2 tab stops without focus indicators.
Google Maps Platform API Fail 13 tab stops without focus indicators (in "Street view").
Bing Maps embed Pass
Bing Maps Control API Pass
MapKit JS (Apple Maps) API Pass
Leaflet JS API Fail
  • 1 tab stop without focus indicator.
  • 4 tab stops where focus indicators aren't persistently visible. [Github issue]
OpenStreetMap embed Fail
  • 1 tab stop without focus indicator.
  • 4 tab stops where focus indicators aren't persistently visible.
OpenLayers API Pass
MapBox Studio embed Fail 1 tab stop without focus indicator. [Github PR]
MapBox GL JS API Fail 1 tab stop without focus indicator. [Github PR]
TomTom Maps SDK for Web Fail 2 tab stops without focus indicators.

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.

Web map tool Result Notes
Google Maps embed Fail 4/4 targets are too small.
Google Maps Platform API Fail 14/14 targets are too small.
Bing Maps embed Fail 3/3 targets are too small.
Bing Maps Control API Fail 9/14 targets are too small.
MapKit JS (Apple Maps) API Fail 5/6 targets are too small.
Leaflet JS API Fail 2/2 targets are too small. [Github issue]
OpenStreetMap embed Fail 2/2 targets are too small.
OpenLayers API Fail 2/2 targets are too small. [Github issue]
MapBox Studio embed Fail 7/7 targets are too small.
MapBox GL JS API Fail 2/2 targets are too small.
TomTom Maps SDK for Web Fail 3/3 targets are too small.

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.

Web map tool Result Notes
Google Maps embed Fail
Bing Maps embed Pass Specifies the corresponding ISO 639-1 code.
OpenStreetMap embed Fail
MapBox Studio embed Pass Specifies the corresponding ISO 639-1 code.

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.

Web map tool Result Notes
Google Maps embed Fail
Google Maps Platform API Fail
Bing Maps embed Pass The language of Parts can be determined as the requirements of SC 3.1.1 Language of Page are met.
Bing Maps Control API Fail
MapKit JS (Apple Maps) API Fail
Leaflet JS API Fail
OpenStreetMap embed Fail
OpenLayers API Fail
MapBox Studio embed Pass The language of Parts can be determined as the requirements of SC 3.1.1 Language of Page are met.
MapBox GL JS API Fail
TomTom Maps SDK for Web 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.

Web map tool Result Notes Screen capture
Google Maps embed Pass
Google Maps Platform API Fail Panning the map display using the arrow keys causes the document to scroll (in "Street view"). View autoplaying GIF
Bing Maps embed Pass
Bing Maps Control API Pass
MapKit JS (Apple Maps) API Pass
Leaflet JS API Pass
OpenStreetMap embed Pass
OpenLayers API Pass
MapBox Studio embed Pass
MapBox GL JS API Pass
TomTom Maps SDK for Web Fail Panning the map display using the arrow keys causes the document to scroll. View autoplaying GIF

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.

Web map tool Result Notes
Google Maps embed Fail Both the "View larger map" link and the "Terms of Use" link open in new windows without warning. The "View larger map" link is especially unexpected as stylistically, it resembles a button, not a link.
Google Maps Platform API Fail The "Terms of Use" link opens in new window without warning. The Google logo link contains the screen reader label "Open this area in Google Maps", which does give the user sufficient warning, as it may open in the native Maps app on mobile.
Bing Maps embed Fail Both the Bing Maps logo and the "Terms" link open in new windows without warning.
Bing Maps Control API Fail Both the Bing Maps logo and the "Terms" link open in new windows without warning.
MapKit JS (Apple Maps) API Fail The "Legal" link is incorrectly marked up as a button (role="button"), opens in new tab without warning.
Leaflet JS API Pass
OpenStreetMap embed Fail The "Report a problem" and "OpenStreetMap" links open in a new tab without warning.
OpenLayers API Fail The "OpenStreetMap" link opens in a new tab without warning.
MapBox Studio embed Fail Mapbox logo link opens in a new tab without warning.
MapBox GL JS API Fail Mapbox logo link opens in a new tab without warning.
TomTom Maps SDK for Web Pass

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.

Web map tool Result Notes
Google Maps embed Fail
  • The "map component" (<div tabindex="0">, which acts as a control to zoom the map display) is missing name and role.
  • Control to toggle between "Satellite imagery" and "Street map" is missing name and role.
Google Maps Platform API Fail
  • The "map component" (<div tabindex="0">, which acts as control to both zoom and pan the map display) is missing name and role.
  • Control to exit "Street view" (<div jsaction="closeControl.click">) is missing name and role.
  • Control to reset the bearing (in "Street view") is missing name.
  • Control to rotate the bearing counter-clockwise (in "Street view") is missing name.
  • Control to rotate the bearing clockwise (in "Street view") is missing name.
Bing Maps embed Fail The "map component" (<div tabindex="0">, which acts as a control to both zoom and pan the map display) is missing role.
Bing Maps Control API Fail
  • The "map component" (<div tabindex="0">, which acts as a control to both zoom and pan the map display) is missing role.
  • Control to toggle area labels under "Bird's Eye view" is missing name.
MapKit JS (Apple Maps) API Fail Control to rotate/reset the bearing is missing role. (Note: there are two separate controls providing the same functionality, for clarification, this refers to <div tabindex="0"> and not the <input type="range" aria-label="{x} degrees"> control.)
Leaflet JS API Fail The "map component" (<div tabindex="0">, which acts as a control to both zoom and pan the map display) is missing name and role. [Github issue]
OpenStreetMap embed Fail The "map component" (<div tabindex="0">, which acts as a control to both zoom and pan the map display) is missing name and role.
OpenLayers API Fail Controls to zoom in and zoom out do not have proper names (while the titles "Zoom in" and "Zoom out" are appropriate, the child text nodes "+" and "−" takes precedence in this case, according to the accessible name and description computation, and is announced as "button plus" and "button minus" in ChromeVox, for example). [Github issue]
MapBox Studio embed Fail
  • The "map component" (<canvas tabindex="0">, which acts as a control to both zoom and pan the map display) is missing role. [Github PR]
  • Control to display attribution and feedback links is missing name and role. [Github PR]
MapBox GL JS API Fail
  • The "map component" (<canvas tabindex="0">, which acts as a control to both zoom and pan the map display) is missing role. [Github PR]
  • Control to display attribution and feedback links is missing name and role. [Github PR]
TomTom Maps SDK for Web Fail
  • The "map component" (<div tabindex="0">, which acts as a control to both zoom and pan the map display) is missing name and role.
  • Control to open the copyright message dialog is missing role.
  • Control to close the copyright message dialog is missing name and role.

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:

About

Manual accessibility evaluation of popular web map tools.

Topics

accessibility mapbox-gl-js google-maps openstreetmap leaflet openlayers bing-maps mapbox mapkit google-maps-api leafletjs openlayers-maps mapkit-js leaflet-maps tomtom-sdk bing-maps-api tomtom-map

Resources

Readme
Activity

Stars

37 stars

Watchers

5 watching

Forks

4 forks
Report repository

Contributors 2

  •  
  •