Accessibility

Interface components

• Native elements first: buttons are buttons, inputs are inputs, with labels attached.
• Composite widgets use their ARIA roles and keyboard patterns: radio groups for SegmentedControl, tabs, menus, listboxes for Select and Combobox, dialogs that trap and restore focus.
• Every focusable element shows a visible :focus-visible ring from --q-focus-ring.
• Components whose name is not visible require one: IconButton takes label, SegmentedControl takes aria-label or aria-labelledby.
• Animations respect prefers-reduced-motion.

Charts

Every chart is a figure named by its aria-label, and gets:

• A summary. Written from the data (range, trend, low and high for a series; the total and shares, or the highest and lowest values, for categories) and rendered as hidden text inside the figure.
• A table. The same data with the same formats. view="table" shows it at the chart's size. Scatter plots above 200 visible points expose an explicit data-view button and 50-row pages instead of a full hidden table.
• A keyboard model. Tab into the plot, arrow keys move between points, Home and End jump, Enter or Space selects, Escape clears the cursor. The focused point is announced through a polite live region.

Sparkline is the exception: it is an image with the summary appended to its aria-label, and has no table fallback and no keyboard model. Each chart page lists its own keys, and the Accessible charts guide shows how to use them well.

What has not been tested

See also

The storefront example combines several chart types in a dashboard. The SaaS example includes an explicit chart/table toggle for exact values.