A11y helpers
labelChart
Gives a chart's svg the role, aria-label and <desc> that screen readers
announce. The name is an attribute, not a <title>: browsers show an svg's
<title> as a tooltip when the pointer rests on the chart. Run on every
render: it reuses the <desc> it made the first time and only updates its
text, so its id, and the attribute that points at it, stay stable.
renderDataTable
Renders a chart's data as a visually hidden table right after its svg, which
screen readers can read cell by cell, and links it from the svg with
aria-details. The table sits in a div.britechart-data-table, which the
link names. Its caption is the chart's name, so run it after
labelChart. Run on every render: it reuses the table it made and
rewrites its content. A null table, or one without rows, removes it.
pivotTable
Lays long data out wide, one row per row key and one column per column
key, in the order each first appears, as screen readers navigate a table
best: a line chart's dates down the side and its topics across the top.
Kind: global constant
| Param | Type | Description |
|---|---|---|
| heading | string | The first column's heading, such as "Date" |
| sortRows | function | Orders the rows, such as by date |
ascending
Orders dates or numbers ascending, for pivotTable's sortRows
prefersReducedMotion
Whether the reader's system asks for reduced motion. Charts check it on
every render, so isAnimated gives way to it, and a change to the setting
applies from the next render. False where there is no matchMedia, as on a
server or in jsdom.
motionDuration
A transition's duration in milliseconds, or 0 when the reader's system asks for reduced motion. A transition of 0 still reaches its end state and fires its end event, so code that waits for it keeps working.
Kind: global constant
| Param | Type | Description |
|---|---|---|
| duration | number | The duration with motion |