Help should be provided for the map container keyboard shortcuts [accessibility]

[nfreear]

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

Labels or instructions should be provided when content requires user input.

As a keyboard user, I prefer to use the keyboard for all interactions.

It was only some time after I began using Leaflet, that I discovered by chance that you can use arrow keys to pan around the map and the + and - keys to zoom in and out. They are not obvious!

There should be something like a popup to explain the keyboard shortcuts.

• WCAG 2.2 Success Criterion 3.3.2 Labels or Instructions
• Affected users: mobility, assistive technology (screen reader) users.

Solution

I'd like to propose something similar to the solution in Google Maps. That is, a “Keyboard shortcuts” button that appears visually at the bottom-right of the map, next to the attribution links.

The button opens a dialog that summarises the available keyboard shortcuts.

Screenshots to follow!

Focus Order

Although visually the “Keyboard shortcuts” button can appear at the bottom of the map, it should be before the map container in the keyboard focus order. Otherwise, it won't be available to a keyboard user until they're past the container!

Minimal example reproducing the issue

No response

Environment

• Leaflet version: 1.9.4,
• Browser (with version): Chrome 114,
• OS/Platform (with version): Mac OS 10.14.6.

[samclaus]

Something to consider is the scope of the library, as well as end-user JavaScript bundle size because that typically suffers when adding features.

To me, the value that Leaflet provides is the sophisticated geometry/GIS math that I am clueless about. It handles figuring out how to lay out HTML img elements with CSS transforms to correctly align tiles from OSM (or another provider) and handles positioning of various other elements (such as markers and polylines).

Outside of that core functionality, I don't want Leaflet to do too much and bloat my application. I personally don't use Leaflet pop-ups or tooltips because I think they are too opinionated and look dated unless heavily modified. Not to mention, I am not sure in-line pop-ups on a map are a good UI practice in the first place.

If Leaflet were to incorporate some sort of modal UI like Google Maps does for the keyboard shortcuts, lots of people would probably disagree on how the modal should look, and some people probably want different keyboard shortcuts than the ones that are currently baked in (thankfully they can just omit the keyboard handler). My point is, features like keyboard shortcuts and pop-up UI may be better suited as the responsibility of final applications that use Leaflet.

[nfreear]

Hi @samclaus,

Thank you for your feedback. I'll try to respond to a few of your points.

Outside of that core functionality, I don't want Leaflet to do too much and bloat my application.

I agree that Leaflet needs to stay small and focus on its key functionality. We can argue about what the core functionality includes - for me, the keyboard shortcuts are essential, so explaining them is also important.

... some people probably want different keyboard shortcuts than the ones that are currently baked in.

For interest, the shortcuts are the same as for Google Maps, which is a good thing.

... thankfully they can just omit the keyboard handler

I hope most people won't omit it - if you need to use a keyboard, it's important.

My point is, features like keyboard shortcuts ... may be better suited as the responsibility of final applications

We'll see what others think.

Best wishes,

Nick

[Falke-Design]

I see the benefits but also the problem of having a bigger bundle.

In my opinion we need to add in Leaflet more accessibility features, which includes translations and also something like a shortcut modal. For such important things (accessiblity) we can't relay on plugins, we need them in Leaflet and maintain it.

@mourner @IvanSanchez @jonkoops @Malvoz please let us know what do you think, so we can close this or continue working on it.

[jonkoops]

We certainly need to add more accessibility features to Leaflet, however I am not entirely convinced this belongs in Leaflet core, or at least not without an opt-in that does not affect the bundle size otherwise.

Either way, we currently have too many ongoing tasks for a Leaflet 2.0 to cut this in, so I will be putting this on the backlog for now.