Accessible maps
Web accessibility is the inclusive practice of ensuring no barriers exist that would prevent interactions or information access.
This guide to Leaflet accessibility can help you create maps that are usable to persons of a wide range of abilities.
Preserve useful defaults
Leaflet comes with a set of useful defaults.
The map container and markers are keyboard operable by default, this enables users who are unable to use a pointing device. Consider the effects on your users before changing defaults such as these.
Markers must be labelled
When using markers,
it is vital to ensure each has a unique and descriptive
alt
or
title:
var marker = L.marker([50.4501, 30.5234],
{alt: 'Kyiv'}).addTo(map) // "Kyiv" is the accessible name of this marker
.bindPopup('Kyiv, Ukraine is the birthplace of Leaflet!');Resulting in markers that are discernible to screen reader users:
| See this example stand-alone. |
In the case of divIcons,
custom HTML
can otherwise provide a visual or non-visual label.
Test your maps
The best way to discover accessibility issues is to test your maps using only a keyboard, as well as using a screen reader. You may already have a screen reader pre-installed, for example:
Purely decorative maps
Some maps are purely decorative and not intended for users to interact with (in similar fashion to background-images and -videos).
Such maps should be hidden from
assistive technologies (ATs),
and have no focusable descendants.
This is to avoid the potential to confuse screen reader users,
and to remove any unnecessary tab stops for keyboard users.
A simple way to achieve this is to use the HTML
inert attribute
polyfill:
<!-- This map is for aesthetic purposes only, and can not be interacted with! -->
<div id='decorative-map' inert></div>
<script src='https://unpkg.com/wicg-inert@latest/dist/inert.min.js'></script>
Utilizing plugins
Plugins can enhance the experience for your users, but can also degrade it in some cases. Therefore it is important that you test your maps whenever a new plugin is added.
If you find an accessibility issue in a plugin, please report it to the plugin’s author.
An example of a plugin that can enhance the experience for your users is the Leaflet.fullscreen plugin. By allowing users to enter into fullscreen mode, they can explore the map in isolation, focusing their attention, this is especially helpful to keyboard and screen reader users (as they are less likely to unintentionally navigate outside the map), but also mobile users in general.
Use an up-to-date version of Leaflet
Leaflet is constantly improving accessibility. Use the latest stable version for the greatest features!