Recipe 02: Bi-Directional Sync
The "Golden Rule" of accessible mapping: Everything on the map must be available in a list.
Try navigating via keyboard. Selecting an item in the list highlights the map marker, and vice-versa.
Locations List
Map View
Accessibility Features
- Bi-Directional Sync: Selecting an item in the list highlights it on the map. Selecting a marker on the map highlights it in the list. This connects the accessible text representation with the visual spatial representation.
- Semantic List: The locations are simple
<button>elements inside a<ul>. This is the most robust, accessible pattern for a selectable list. - State Management: We use
aria-current="true"to programmatically indicate which list item is currently selected, regardless of how it was triggered. - Live Region: Selection changes are announced to screen readers via an
aria-live="polite"region, so users know which location is active. - Skip Link: A visible-on-focus skip link lets keyboard users bypass the map and jump directly to the content after it.
Try This
- Click "Public Library" in the list. Notice the map marker popup opens.
- Keyboard Check: Tab into the map markers. Press
Enteron a marker. Notice the focus moves to or highlights the corresponding list item.