---
id: "packages/active-geo/styling-and-accessibility"
title: "Styling and accessibility"
description: "The --geo-* tokens, the host's semantic tokens, dark mode, and what the map does for keyboard and screen-reader users."
url: "/packages/active-geo/styling-and-accessibility"
locale: "en"
revision: "2889303e3e270f9f"
---

# Styling and accessibility

## Tokens

One stylesheet, imported by the entry, every rule under `.active-geo`. Colours are tokens:
`--geo-sequential-1` to `7` and `--geo-category-1` to `8` for classes, the diverging set, the
no-data hatch, the area stroke, the point core and its halo, focus and selection. The tooltip,
menu, legend, controls and table read the host's semantic tokens (`--popover`, `--border`,
`--muted-foreground`, `--card`, `--input`, `--radius`, …) with package defaults. The font is
`--geo-font-family`, else the host's `--font-sans`.

On this site those semantic tokens are active-ui's, so a map matches the components around it, in
light and dark, without a mapping of its own.

## Accessibility

- **Keyboard**: the map is one tab stop with `aria-activedescendant` over the drawn objects (also
  canvas points). Arrow keys move, Home and End go to the first and last object, Space selects
  when selection is on, Enter activates, Shift+F10 opens the menu, and the zoom shortcuts work on a
  focused map. Focus is a dashed 2 px line over a halo, visible on any fill.
- **Screen readers**: every object has a name and its values in words; the hidden data
  alternative and the visible table read the same rows; a withheld value is announced as withheld.
- **Colour**: every cue that must show on an arbitrary fill pairs two tones; forced-colours mode
  maps strokes, selection and focus to system colours.

A host that sets its own `--geo-point`, `--geo-selected` or `--geo-focus` keeps these pairs and
should give `--geo-halo` the opposite tone.