Open
Description
Using code from Leaflet (and plugins) means this map component is sometimes inheriting accessibility issues.
We do have comments inline in code where fixes have been made, sometimes with links for upstream issues. Collecting them here in one spot helps get an overview of the state of accessibility in this component. This issue is to track upstream issues for discussion/fixes.
🔗 Map component
- Should be a programmatically identifiable element.
-
The controls container should come before other author provided content such as popups in the DOM (i.e..leaflet-control-container
should come before.leaflet-map-pane
).
tab navigation for markers is problematic (see upstream issue below for explanation). - Should have resizable text (relative
font-size
units).
🔗 Controls in general
-
<a role="button">
should behave like<button>
. - Should be at least 44 by 44 CSS pixels.
- Should always show a focus outline on keyboard navigation.
- Should not have a focus outline unless actually focused.
- In many cases controls have both a
title
and anaria-label
with the same value, which causes double speak in some screen readers. Thetitle
could be moved to the control's child icon element, which should then be set toaria-hidden="true"
to preserve the tooltip-on-hover functionality while preventing double speak.- Upstream Leaflet: TODO.
- Focus should not be shifted to the map after controls have been interacted with.
🔗 Zoom controls
- Characters
+
and-
should be explicitly hidden from ATs. - Should convey the disabled state to ATs when min/max zoom has been reached.
🔗 Layer control
- Should have
role="button"
. - Should convey the
aria-expanded
state. - The layer menu's container should be conveyed as a group (of related user interfaces).
- Esc key should close the layer menu.
- Upstream Leaflet: TODO.
- Focus should be delegated to the layer menu (e.g. to a
tabindex="-1"
on container, or first layer item) after activating the layer control, at least for keyboard users.- Upstream Leaflet: TODO.
🔗 Fullscreen control
- Should have
role="button"
.
🔗 Markers
- Interactive markers should have an accessible name and
role="button"
.- Fixed (all features have a default accessible name of "Feature", including markers).
- Upstream: Interactive markers should have an accessible name and
role="button"
Leaflet/Leaflet#7428.
- Interactive markers should convey the
aria-expanded
state of popups. - Markers that don't do anything (i.e. don't bind to a popup?) should not be focusable by default.
- Upstream Leaflet: TODO.
- Should be at least 44 by 44 CSS pixels (relates to Increase default size of controls #215).
-
Markers (and other vector features) should be panned into view on focus.- No longer needed in this component, see Features should be panned into view on focus #482 (comment)).
- Upstream: Autopan out of view markers into view on focus Leaflet/Leaflet#8040.
🔗 Popups
- Popup content isn't announced by screen readers when opened. Focus should be delegated to the popup after it's been opened.
- Fixed in Follows updated keyboard interaction rules #292 (focus is sent to
.mapml-popup-content
). - Upstream: Clicking or using a keyboard to open popup doesn't set focus to popup Leaflet/Leaflet#2199 (describes a different problem, but proposes a shared solution).
- Fixed in Follows updated keyboard interaction rules #292 (focus is sent to
-
.leaflet-popup
should haverole="dialog"
.- Fixed in 9612783 (applied to
.mapml-popup-content
). - Upstream: Potentially set popups to
role="dialog"
Leaflet/Leaflet#7968.
- Fixed in 9612783 (applied to
- Popup's Close button should have an accessible name and
role="button"
. - Character
×
in the popup's Close button should be explicitly hidden from ATs. - Popup's Close button (and controls in
mapml-focus-buttons
) should be at least 44 by 44 CSS pixels (relates to Increase default size of controls #215). - Popup's Close button should have sufficient contrast ratio.
- When focus is inside of a popup, pressing Esc should close the popup.
- When a popup has been closed focus should not be sent to the
<body>
element, rather the previously focused element (e.g. marker) should be focused (if not available then the map container should be focused).- Fixed in Follows updated keyboard interaction rules #292 for Esc key.
- Closing popups using the × close button should send focus to the marker/feature
- Upstream Leaflet: TODO.
🔗 Context menu
- Menu items should have
role="button"
. - When the context menu has been opened focus should be sent to (or into) it.
- Partially fixed in
95ecbcb
(does not work in Chrome). - Upstream: [accessibility] Delegate focus when context menu has been opened aratcliffe/Leaflet.contextmenu#135.
- Partially fixed in
- When the context menu has been closed focus should be sent to the element that was focused before opening the context menu (if not available then the map container should be focused).
🔗 Attribution
- Should have a legible font-size.
- Fixed in mapml.css#L31-L36.
- Upstream: Use a legible
font-size
in the attribution Leaflet/Leaflet#7346.
- Should have resizable text (relative
font-size
units). - Links should have sufficient contrast ratio.
- Fixed in mapml.css#L112.
- Upstream: Attribution links only identified by colour Leaflet/Leaflet#6742.
- Links should easily be distinguishable from surrounding text (e.g. by preserving the default
text-decoration
).- Fixed in mapml.css#L113.
- Upstream: Attribution links only identified by colour Leaflet/Leaflet#6742.
- The container element for the attribution should have sufficient contrast against underlying graphics.
- The container element for the attribution should provide contextual information, e.g.
role="group" aria-label="Map data attribution"
(or a control to toggle attribution should be labelled, per Collapse attribution behind a control #216).- Fixed in Add role and aria-label to attribution control. #598.
- Upstream Leaflet: TODO.
- The vertical lines (separators) should be
aria-hidden="true"
.- May be fixed in Attribution control #642.
- Upstream: Hide the attribution separator from screen readers Leaflet/Leaflet#7969.
🔗 Tooltips
- Tooltips aren't announced by screen readers.
- A fix is not desirable/necessary in this polyfill: features provide the accessible name, if this was enabled it'd cause double speak!
- Upstream: Tooltips should be (reliably and deliberately) announced to screen reader users Leaflet/Leaflet#8112