-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tracking upstream accessibility issues #247
Comments
Regarding:
Shouldn't this be on the mapml-viewer / map element? The leaflet-container is in shadow DOM. |
The leaflet container has |
I'm just surprised that shadow DOM is traversable by AT, but probably because I am not too familiar with how it works and how it fails. |
@prushforth ATs construct an accessibility tree from the rendered DOM (and may be affected by CSS, e.g. I've updated the list btw! |
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
leaflet-container
a programmatically determinable element Leaflet/Leaflet#7193.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).
mapml-focus-buttons
with subclass role of composite widget role or proposedfocusgroup
attribute #535.font-size
units).font-size
units for resizable text Leaflet/Leaflet#7548.🔗 Controls in general
<a role="button">
should behave like<button>
.<button>
for controls Leaflet/Leaflet#7821tabindex="0"
instead ofhref="#"
for controls? Leaflet/Leaflet#7368role="button"
should be operable using both Enter and Space Leaflet/Leaflet#7369leaflet-container
for keyboard users Leaflet/Leaflet#7996..leaflet-active
may cause more than 1 component to be outlined simultaneously Leaflet/Leaflet#7499.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._refocusOnMap
forces keyboard/swipe gesture users to navigate all the way back to continue interacting with a control + causes verbose speech Leaflet/Leaflet#7947.🔗 Zoom controls
+
and-
should be explicitly hidden from ATs.🔗 Layer control
role="button"
.role="button"
Leaflet/Leaflet#7498.aria-expanded
state.leaflet-control-layers-toggle
should convey thearia-expanded
state ofleaflet-control-layers
Leaflet/Leaflet#7526.leaflet-control-layers-list
should be conveyed as a group of related controls Leaflet/Leaflet#7530.tabindex="-1"
on container, or first layer item) after activating the layer control, at least for keyboard users.🔗 Fullscreen control
role="button"
.role="button"
on the fullscreen control Leaflet/Leaflet.fullscreen#114🔗 Markers
role="button"
.role="button"
Leaflet/Leaflet#7428.aria-expanded
state of popups.aria-expanded
state of the popup Leaflet/Leaflet#7527.Markers (and other vector features) should be panned into view on focus.🔗 Popups
.mapml-popup-content
)..leaflet-popup
should haverole="dialog"
..mapml-popup-content
).role="dialog"
Leaflet/Leaflet#7968.role="button"
.role="button"
Leaflet/Leaflet#7399.×
in the popup's Close button should be explicitly hidden from ATs.mapml-focus-buttons
) should be at least 44 by 44 CSS pixels (relates to Increase default size of controls #215).<body>
element, rather the previously focused element (e.g. marker) should be focused (if not available then the map container should be focused).🔗 Context menu
role="button"
.5d076fe
.95ecbcb
(does not work in Chrome).🔗 Attribution
font-size
in the attribution Leaflet/Leaflet#7346.font-size
units).font-size
units for resizable text Leaflet/Leaflet#7548.text-decoration
).role="group" aria-label="Map data attribution"
(or a control to toggle attribution should be labelled, per Collapse attribution behind a control #216).aria-hidden="true"
.🔗 Tooltips
The text was updated successfully, but these errors were encountered: