Chart

Role and semantics

• Chart is a <figure> named by its <figcaption> through aria-labelledby.
• The drawing has role="img". Its name is the title plus a generated summary sentence: the kind, the number of series, the number of categories and the highest value with its series and category. Example: “Monthly values. Line chart. Number of series: 2. Number of categories: 6. Highest value: 30 (First series, May).”
• With hideValues the summary leaves out the highest value.
• description is linked to the figure and the drawing with aria-describedby.
• The ECharts aria component is on and draws decal patterns on bar and donut charts; the ECharts label is off, the name comes from Chart.
• Every chart has a semantic table: <caption> is the title, categories are th scope="row", series are th scope="col".
• While loading, the figure is aria-busy and “Loading” is read.

Keyboard

Key	Behaviour
Tab	The only stop is the table toggle (table="toggle"). Chart points take no focus.
Enter, Space	Activates the button: switches between the chart and the table.

Points are not focusable because all the data is in the table. The tooltip opens with the mouse only; its equivalent for keyboard and screen reader users is the table.

Focus

The only focusable element is the table toggle; it uses the 2 px ring of Button. The button reports its state with aria-expanded and the table with aria-controls. With table="visible" or "hidden" the chart adds no tab stop.

Screen reader output

Example	Read
Chart	“Monthly values, figure”; “Monthly values. Line chart. Number of series: 2. Number of categories: 6. Highest value: 30 (First series, May)., image”
Table toggle	“Show as table, button, collapsed”
Table open	“Show as chart, button, expanded”; then the table, header cells and values
Sparkline with label	“Trend of the last six months, image”
Sparkline without label	Not read

Contrast

Series colours must reach 3:1 against the surface as non-text objects (WCAG 1.4.11). Values are computed for the bigbang brand on color-surface-raised; in the fixture brand the lowest values are 3.17:1 (light) and 3.32:1 (dark).

Series	Light mode	Dark mode
chart-series-1	4.45:1	3.75:1
chart-series-2	4.89:1	3.42:1
chart-series-3	4.64:1	3.61:1
chart-series-4	5.03:1	3.32:1
chart-series-5	4.26:1	3.92:1
chart-series-6	4.72:1	3.54:1
chart-series-7	4.78:1	3.49:1
chart-series-8 (lowest, light mode)	3.07:1	5.44:1
color-text-subtle (axis text)	9.07:1	9.23:1
color-text-default (tooltip)	16.71:1	15.44:1

Grid lines (color-border-subtle, 1.26:1) are decorative; the data values are also in the table.

Colour never carries meaning alone: line series use different symbols and line styles (solid, dashed, dotted), bar and donut series use patterns (decals); series names are written in the legend and the table.

WCAG 2.2

Criterion	How Chart meets it	What the product team does
1.1.1 Non-text content	The drawing is named with a summary sentence; all data is in the table.	Write a meaningful title and, when needed, a description.
1.3.1 Info and relationships	figure/figcaption; the table has caption and th scope.	If you use table="hidden", offer the data another way.
1.4.1 Use of colour	Symbols, line styles and patterns sit beside colour.	Do not write colour-bound phrases such as “the red line” in text.
1.4.11 Non-text contrast	Series colours are at least 3.07:1 against the surface.	Do not supply series colours yourself.
1.4.13 Content on hover	The tooltip stays inside the chart box; the same data is in the table.	-
2.1.1 Keyboard	All functions work by keyboard through the table toggle and the table.	Do not hide the table.
2.3.3 Animation from interactions	Animation is off with reduced motion.	-
4.1.2 Name, role, value	The button carries aria-expanded and aria-controls.	-