Improve the default navigation flow for keyboard and screen reader users #7479
Description
Motivation
The DOM order of elements affects the order in which screen readers announce content, and also the focus order.
I believe that the map controls should be available/presented to the user before other author provided content such as markers and popups.
This would reduce confusion and allow non-visual users to form a consistent mental model of the content. It also creates a more consistent and logical focus order even across different maps (perhaps by different authors) with varying content.
Relates to WCAG 2.1 Success Criterion 2.4.3 Focus Order and 3.2.3 Consistent Navigation.
Proposed solution
Change leaflet-control-container
to come before leaflet-map-pane
in the DOM order.
Arrow key navigation for focusable elements in leaflet-map-pane
.
Additional context
@stevevance raised a similar concern in #3210 (quoting the relevant parts):
I was testing my website with a person who is completely blind and uses the VoiceOver (VO) function on an iPad. I was observing her as she browsed the entire webpage (through a tapping function in VO that mimics tabbing between elements*) and came across the Leaflet map.
Expectations
The next tab should land on the zoom controls, layer controls, and any other controls, so the user can understand what functions are available to control the map.
The next tab should land on any marker that has a popup
Activity