Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Line Chart
  5. Accessibility

Line Chart

Accessibility

Import LineChart, LineChartCurve from @prepared911/ui/line-chart.
Name, description and table
label is required. It names the plot, a focusable region with role="application", and captions a data table that is visually hidden and in the accessibility tree: a column heading per series, a row heading per category, and a cell per value. The table renders on the server and in print and never depends on hover. description is read after the name; use it for how to explore the chart. The painted axes, markers and tooltip are aria-hidden, because the table and the live announcements carry the content.
Keyboard
The plot is in the tab order. Once focused:
  • Left and Right move to the previous and next category in reading order (they swap in right-to-left) and stop at the ends. Home and End jump to the first and last.
  • Up and Down move between the series' markers at the current category, in the order they are stacked on screen (higher value first), and stop at the top and bottom marker.
  • Enter and Space select the focused point and call onSelect({ datasetIndex, index }).
  • Escape dismisses the cursor and the tooltip.
Every (series, category) pair that has a value is reachable. A value that is not finite has no marker and cannot be selected. Each move is announced through the live announcer as the heading and the focused series' row, joined with the locale's list punctuation.
Pointer
Hovering shows the tooltip and a marker on every visible series. Clicking a series' active marker selects it. A click on the plot away from a marker selects nothing.
Legend
Legend entries are buttons in a list (role="list", so the entry count is read). A button is pressed (aria-pressed="true") while its series is shown. A dashed series has a dashed swatch, so a comparison series differs from its main series without color.
Color and contrast
Series colors come from Chroma's palette tokens, which clear 3:1 against every surface. Axis text, gridlines and the tooltip use the foreground, border and popup tokens. Under forced-colors: active the chrome uses system colors, series keep their colors because they carry the data, and a dashed series also differs by its dashes.
Motion
The entrance reveal, the tooltip glide and the value-scale spring stop under prefers-reduced-motion. The chart is complete without them, and print turns the reveal off.
Sparkline
With sparkline the chart is one image named by label, with no tab stop, tooltip, legend or data table, so it can sit in the aria-hidden MetricCard slot without a focusable element in a hidden subtree. The value, delta and subtitle of the card carry the meaning.
Previous
Line Chart / API and Development
Next
Loader / Usage
On this page
Name, description and table
Keyboard
Pointer
Legend
Color and contrast
Motion
Sparkline