Map is keyboard-accessible; markers navigable without pointer device

A map that requires a pointer device to navigate is inaccessible to keyboard-only users, screen reader users, and users with motor impairments — a violation of WCAG 2.2 SC 2.1.1 (Keyboard) and Section 508 2018 Refresh 502.3.3. For directories serving public-interest information (local services, healthcare providers, government facilities), keyboard inaccessibility can be a legal liability under the ADA. Users who rely on Tab navigation to cycle through markers and Enter to open detail popups receive no functional equivalent to mouse interaction if focus management is absent.

Use a map library with built-in keyboard support (Mapbox GL JS, Leaflet) and ensure custom markers are implemented as focusable, interactive elements with explicit aria-label attributes.

<div
  id="map"
  role="application"
  aria-label="Interactive map of listings"
  tabIndex={0}
/>

For custom marker elements, render them as <button> tags (not <div>) so they are natively keyboard-focusable:

markers.forEach((marker) => {
  const el = document.createElement('button');
  el.setAttribute('aria-label', `${marker.name}, ${marker.category}`);
  el.className = 'map-marker';
  el.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') openPopup(marker);
  });
  new maplibregl.Marker({ element: el }).setLngLat([marker.lng, marker.lat]).addTo(map);
});

Verify focus indicators are visible — do not suppress outline in CSS without a visible alternative.