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.

• ID: directory-map-location.map-rendering.keyboard-accessible

• Severity: medium

• What to look for: Test keyboard navigation: Tab to the map and verify it has focus. Use arrow keys to pan, +/- keys to zoom. Use Tab to cycle through markers and Enter to open popups. Check for focus indicators (visible outline) on interactive elements.

• Pass criteria: Map can be navigated without a mouse. Enumerate all interactive map elements (markers, popups, controls) and confirm at least 100% are keyboard-reachable. Arrow keys pan, +/- zoom, Tab cycles focus through markers, Enter opens popups. All interactive elements have visible focus indicators.

• Fail criteria: Map requires mouse/pointer for navigation. Keyboard users cannot interact with markers or zoom. Tab navigation that skips markers entirely does not count as pass.

• Skip (N/A) when: No map display exists.

• Detail on fail: "Map requires pointer device; no keyboard navigation support implemented" or "Tab does not focus markers; focus indicators invisible"

• Remediation: Use a map library with built-in keyboard support (Mapbox GL JS, Leaflet) and add aria-labels:

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

  For custom markers, ensure focus management:

  markers.forEach((marker, idx) => {
    const el = document.createElement('button');
    el.setAttribute('aria-label', `${marker.name}, ${marker.category}`);
    el.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') openPopup(marker);
    });
  });