Recipe 01: The Accessible Map Wrapper
This is the "Hello World" of accessible mapping. It demonstrates the minimum semantic structure required.
Accessibility Features
- Semantic Wrapper: The map is wrapped in a
<figure>with a<figcaption>. This provides a simpler summary for screen readers users who may skip the complex map application. - Role Application: The map container has
role="application"to signal to screen readers that they should switch to "interaction mode" (passing keyboard keys through to the app). - Keyboard Panning: The map container has
tabindex="0", making it focusable. We rely on Leaflet's built-in keyboard handler (arrow keys) which works once the element is focused. - Accessible Zoom Controls: Zoom buttons are placed outside the
role="application"region so screen readers can reach them in reading mode. Each button has anaria-labeland meets the 44×44 CSS pixel minimum touch target size. - Skip Link: A visible-on-focus skip link at the top of the page lets keyboard users bypass the map entirely and jump to the content that follows it.
Try This
- Press
Tabuntil the blue focus ring appears around the map. - Use Arrow Keys to pan the map view.
- Press
+or-to zoom in/out. - Or use the Zoom Controls buttons above the map.
- Press Tab from the very start of the page to reveal the Skip map link.