Leaflet.a11y

An accessibility and localization/translation plugin for Leaflet.

• See: Changelog
• See: Roadmap
• Demo: nfreear.github.io/leaflet.a11y

Aim

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.

What is “A11y“?

“A11y“ is a numeronym – an abbreviation for accessibility. It is often pronounced “alley“ (see #10).

Leaflet.i18n plugin optional

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.

What it does

The plugin currently does the following:

1. Set a role and aria-label on the Leaflet map container element (see L-7193).
2. Manage keyboard focus when popups are opened and closed (see L-8115).
3. Fix so non-interactive markers are correctly identified (L-8116)
4. 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!

Usage

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);

// ...

Build and Test

npm install
npm run build
npm test
npm start

Feedback, contributions and pull requests are welcomed!

License: MIT.