Skip to main content

Accessibility

Display-only maps expose one labeled SVG image; their internal paths are hidden from the accessibility tree and do not enter the Tab order.

When onClick is provided, the SVG becomes a labeled group and features become button-role paths with:

  • one roving Tab stop per map;
  • Arrow key navigation with wrapping;
  • Home and End navigation;
  • Enter and Space activation;
  • aria-pressed for controlled selection;
  • visible focus highlighting; and
  • focus-driven tooltips positioned at feature centroids.

Always provide an ariaLabel that describes the map's purpose, not only its geography:

<ChileMap topology={topology} ariaLabel="Regional unemployment rate in Chile, 2026" onClick={openRegionDetails} />

Do not communicate meaning using color alone. Pair maps with a legend, title, units, source, and, when the data is important, an accessible table or textual summary.