Checklist

• I've looked at the documentation to make sure the behavior isn't documented and expected.
• I'm sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
• I've searched through the current issues to make sure this hasn't been reported yet.
• I agree to follow the Code of Conduct that this project adheres to.

Problem

Every interactive and focusable element needs a programmatically determinable name, role and value. Without a name and role, it is hard for a user of assistive technology to understand how to interact with it.

Currently, the accessible name of the map container is composed of the contents of the map, which in a map with lots of markers or similar makes it hard to understand.

As an example, a map with one marker just using defaults has the name, "Marker Zoom in Zoom out Leaflet © OpenStreetMap".

• WCAG 2.2 Success Criteria: 4.1.2 Name, Role, Value.
• Users affected: Vision (users of assistive technology, screen readers).

Proposed Solution

Give the leaflet-container an appropriate accessible name:

1. Use a sensible default for the name ("Map"),
2. Give the map implementer an option to set the name,
3. If aria-label is not set, then setaria-label="Map"

Options

src/map/Map.js:

options: {
  // ...

  // @option title: String = 'Map'
  // Short text for the `aria-label` attribute of the map container.
  // [Useful for accessibility](https://leafletjs.com/examples/accessibility/).		
  title: 'Map',

  // ...
},

Implementation

src/map/Map.js:

_initLayout () {
  // ...

  if (!container.hasAttribute('aria-label')) {
    container.setAttribute('aria-label', this.options.title);
  }

  // ...
},

I would welcome feedback on the issue and proposed solution.

If acceptable, I'd like to submit a pull-request with a unit test.

Thank you!

Nick

Environment

• Leaflet version: 1.9.4
• Browser (with version): Chrome 114
• OS/Platform (with version): Mac OS 10.14