Map container needs an accessible name and role

Problem

Leaflet's map container element is focusable because it has a tabindex="0" attribute set. This enables keyboard users to, "... navigate the map with keyboard arrows and +/- keys."

Every interactive element should have an accessible name, role and value (and/or state). Without an accessible name and role, users of assistive technology will not understand what they can do when focused on the map container.

WCAG Success Criteria: 4.1.2 Name, Role, Value.
Core Leaflet bug: Leaflet/Leaflet/issues/7193.

Solution

Set role and aria-label attributes on the container element. We can also set aria-roledescription (note, this needs translating/localizing, as does aria-label). For example:

mapElem.role = 'region';
mapElem.ariaLabel = _('Map');
mapElem.ariaRoleDescription = _('map');

Result:

<div
  class="leaflet-container ..."
  tabindex="0"
  role="region"
  aria-label="Map"
  aria-roledescription="map"
  >
  ...
</div>

nfreear / leaflet.plugins

Map container needs an accessible name and role #2

Problem

Solution