UI & Components

Accessibility and SSR

Use accessibility and ssr with the current published Askr packages.

@askrjs/askr0.0.59

How to use accessibility and ssr

Create a typed plot factory once, give the root stable row data, and compose only the scales, marks, and interactions the chart needs.

Import the published @askrjs/askr entrypoint.
Keep accessibility and ssr configuration next to the component, route, or server composition root that owns it.
Handle pending, unavailable, cancellation, and failure states, then verify the production path.

import { createPlot } from '@askrjs/charts';

const Plot = createPlot<ProjectRow>();

<Plot.Root data={rows} rowKey={(row) => row.id} label="Revenue by day">
  <Plot.Axis axis="x" />
  <Plot.Axis axis="y" />
  <Plot.Line x="createdAt" y="revenue" />
</Plot.Root>

Accessible summary

`Root.summary` accepts either a fixed string or a callback that receives `{ rows, sourceRowCount, transformedRowCount, omittedRowCount, visibleRowCount }`, so the accessible description can stay truthful about how many rows were actually rendered versus omitted. Pairing a summary callback with `diagnostics` is the recommended way to surface data-quality issues (invalid dates, non-finite numbers) to both developers and assistive technology.

Heading structure

`Root`'s `title` renders a visible semantic heading, and `headingLevel` (1 through 6) lets it slot correctly into the surrounding page outline instead of always defaulting to one level. `description` supplies supporting text alongside the heading for additional context beyond the title alone.

SSR output

Server rendering emits the reserved region, title, description, legend, summary, empty state, and keyboard/data instructions — but no graphical marks, since Canvas 2D has nothing to paint before hydration. After hydration, the root mounts a base canvas for the scene and a separate overlay canvas for transient interaction, and a "View data" control materializes the full transformed table on demand rather than duplicating every row into the initial document.

Motion and color

Without JavaScript, users still get the semantic label, summary, legend, and instructions, just not the graphical marks or the on-demand table — so no essential information should live only in a tooltip or a canvas pixel. The renderer respects reduced-motion preferences by disabling nonessential transitions while still reflecting real state changes, and series color comes from theme tokens (`--ak-chart-series-1` through `--ak-chart-series-10`) rather than hardcoded values, so contrast follows whatever theme is active.