We just wrapped up AG Studio Launch Week See what we shipped

React Embedded AnalyticsAccessibility

Version 3.1.0

AG Studio supports keyboard navigation and works with screen readers. Colour contrast is set by the theme your application applies.

Conformance Copy Link

Studio targets WCAG 2.1 level AA. WCAG is the standard most accessibility regulations reference: Section 508 incorporates WCAG 2.0 level AA, and the ADA is commonly interpreted against WCAG. Meeting 2.1 AA aligns Studio with those requirements rather than guaranteeing compliance with any one of them. Colour contrast depends on your theme, as described in Colour and Contrast.

Keyboard Navigation Copy Link

Studio is primarily a mouse-driven application, but its interface can also be operated with the keyboard: the canvas, the widget configurator, and the filters panel are all focusable and navigable, and the focused element shows a visible focus indicator. For the complete list of keys, see Keyboard Shortcuts.

Moving and resizing widgets, and reordering fields and filters, can all be done with the keyboard. When you reorder a field or filter, its new position is announced to screen readers. This meets WCAG 2.2 Success Criterion 2.5.7 Dragging Movements, which post-dates the 2.1 baseline above.

Screen Readers Copy Link

Studio takes a standards-based approach rather than targeting one reader, and is tested with JAWS on Windows and VoiceOver on macOS. Interactive controls expose their name, role, and state, and changes that happen without a page reload, such as adding, removing or reordering fields and filters, are announced through a live region. Announcements use the current interface language (see Localisation).

Studio uses native HTML controls wherever possible and adds ARIA only to convey state that the markup cannot: aria-label, aria-expanded, aria-haspopup, and aria-controls, plus a polite live region for the announcements above. These are applied automatically and need no configuration.

Colour and Contrast Copy Link

Your application's theme sets Studio's colour contrast. The theme supplies the text, background, border and focus indicator colours, so a contrast requirement is met by choosing theme colours that satisfy it.

The built-in light and dark themes are designed for legible text contrast. Dark mode is selected with the data-ag-theme-mode attribute described in Theming.

To change contrast, adjust the theme's colours in the Theme Builder and export the result. Check the colours against the contrast requirements your application must meet.

Grid and Chart Widgets Copy Link

Grid and chart widgets render through AG Grid and AG Charts and inherit their accessibility. For grid-specific guidance, including screen-reader semantics, DOM element order and virtualisation trade-offs, see the AG Grid accessibility documentation.