A collection of accessibility and localisation/ translation plugins for Leaflet.
Plugin | Description | NPM |
---|---|---|
Leaflet.a11y | An accessibility and localization plugin | |
Leaflet.translate | Translations/ language packs for Leaflet core and plugins | |
L.keyboard-help | A control to display help for keyboard shortcuts |
- See: Changelog
- See: Roadmap
- Demo: nfreear.github.io/leaflet.plugins
This plugin does NOT replace accessibility efforts in core Leaflet. It is a means to provide interim fixes, and potentially to test fixes.
The aim for this plugin is for it to become obsolete and to retire it, because sufficient accessibility fixes and enhancements have been made to core Leaflet. For more see #14.
“A11y“ is a numeronym – an abbreviation for accessibility. It is often pronounced “alley“ (see #10).
If available, Leaflet.a11y
uses the Leaflet.i18n internationalisation plugin.
If the Leaflet.i18n
plugin is not available, a shim is provided for the L._()
translation function.
The plugin currently does the following:
- Set a
role
andaria-label
on the Leaflet map container element (see L-7193). - Manage keyboard focus when popups are opened and closed (see L-8115).
- Fix so non-interactive markers are correctly identified (L-8116)
- Enable map controls (Zoom in, Zoom out, Close popup, ...) to be translated into a language that has been set with
setLocale
(Leaflet.i18n). Mostly relevant for accessibility, as most text is hidden from visual users (L-9092).
More to follow!
Include or import
core Leaflet and the plugins:
<script src="path/to/leaflet.js"></script>
<script src="path/to/Leaflet.i18n.js"></script>
<script src="path/to/Leaflet.a11y.js"></script>
Then, simply set the a11yPlugin
option when creating a map:
var map = L.map('map', {
a11yPlugin: true
// ...
}).setView([51.505, -0.09], 13);
// ...
npm install
npm run build
npm test
npm start
Feedback, contributions and pull requests are welcomed!
License: MIT.