Accessibility

We are continuously researching and developing methods to make our maps accessible to all our users. Considerable work remains to be done, and all producers of web maps around the world are grappling with this to varying degrees. We follow general best practices whereever possible, and focus our accessiblity efforts on both interactivity and visual design. We touch on these areas in the sections below. In the last section, we provide links to online documentation that has helped guide our work. We are continuing to develop the content on this page and will be updating it periodically.

Alt text

A description field is required for all maps built with NPMap. When accessed with a screen reader, the this text acts like alt text for an image, explaining the purpose of the map to the user.

Interactivity

The current version of NPMap, version 4, is built on top of Leaflet, and incorporates many features from Mapbox GL JS. The next version of NPMap, which is currently under development, will be based on MapLibre. Some of NPMap’s accessibility features originate with the libraries it is built upon, and we provide some details below specific to Leaflet.

NPMap also maintains standard HTML accessibility best practices, like using ARIA (Accessible Rich Internet Applications) tags by default.

Leaflet

NPMap preserves Leaflet’s tab indexing, which enables keyboard operability and provides accessibility to persons who cannot use a pointing device.

To learn more, visit Leaflet’s page detailing their accessibility features.

Visual design

Color blindness

We use simulators, including Adobe Illustrator’s proof setup/color blindness tool, to help us optimize the visual design of our maps for all users, including those persons who have difficulty discerning colors. Where possible, we don’t rely solely on color to convey different classes or categories of map features. We use additional visual variables, including line patterns, textures, labels, and our robust pictorgraphic symbol set, among others.

Low vision

Where possible, we employ high contrast in our map symbols to boost legibility for persons with low vision disability. The Slate version of our basemap works well for those low vision users who invert the colors of their screens to boost readability.

Future improvements

The following items are currently queued up in our development backlog:

These items are also on the horizon:

NPMap5 Interactivity Accessibility tool

The tool’s options are listed below.

export interface AccessibilityOptions {
    'labelField': string | ((feature: GeoJSONMapFeature) => string), // The field to use for the label
    'drawFeature'?: boolean, // Will Draw a line around the feature, otherwise will make a bbox
    'bufferPixels'?: number, // The size of the line buffer in screen pixels
    'bufferSteps'?: number, // The amount of points in the buffer circle (defaults to 8),
    'simulateHover'?: boolean | ((feature: GeoJSONMapFeature) => void), // Simulates the mouseover event on focus
    'simulateClick'?: boolean | ((feature: GeoJSONMapFeature) => void), // Simulates the mouseclick event on space, enter, or numpad enter
};

The plugin draws an image map-type element on top of the map with a link for each map feature. With a label field specified, the plugin labels the feature:

if (label) {
    area.tabIndex = tabIndex;
    area.ariaLabel = label;
    area.ariaLabel ? area.alt = area.ariaLabel : true;
};

Further reading

World Wide Web Consortium (W3C) guidance:

W3C Accessible Maps

W3C Accessible Rich Internet Applications (WAI-ARIA) 1.3

Helpful blogposts and articles that synthesize the available guidance and provide implementation strategies:

Geomatics Canada: How to make maps accessible?

Peer-reviewed research:

Accessible Web Maps for Visually Impaired Users: Recommendations and Example Solutions, by Sabine Hennig, Fritz Zobl, and Wolfgang W. Wasserburger

Color Design for the Color Vision Impaired, by Bernhard Jenny and Nathanial Vaughn Kelso