---
title: "Accessibility"
framework: react
version: "2.1.1"
---

# Accessibility

AG Studio supports keyboard navigation, works with screen readers, and is legible at accessible contrast levels.

## Conformance

Studio targets [WCAG 2.1](https://www.w3.org/TR/WCAG21/) 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 — so meeting 2.1 AA aligns Studio with those requirements rather than guaranteeing compliance with any one of them.

## Keyboard Navigation

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](https://www.ag-grid.com/studio/react/keyboard-shortcuts/).

Every action that can be performed by dragging — rearranging widgets, reordering fields, reordering filters — also has a keyboard equivalent, so a drag is never the only way to do it, and the resulting position is announced to screen readers. This meets [WCAG 2.2 Success Criterion 2.5.7 Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html), which post-dates the 2.1 baseline above.

## Screen Readers

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 — adding, removing, or reordering fields and filters — are announced through a live region. Announcements use the current interface language (see [Localisation](https://www.ag-grid.com/studio/react/localisation/)).

## ARIA

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

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 the [Theming Overview](https://www.ag-grid.com/studio/react/theming/).

For users who need stronger contrast, the [Theme Builder](https://www.ag-grid.com/studio/react/theme-builder/) includes a **High Contrast** preset, with light and dark variants that pair high-contrast text and focus indicators with a colour-blind-safe chart palette. You can also start from any preset and adjust the contrast-related theme parameters yourself.

> **Tip**
>
> The High Contrast preset is a good starting point even if you only need to raise contrast in a few places — export it from the Theme Builder and keep the parameters you want.

## Grid and Chart Widgets

Grid and chart widgets render through AG Grid and AG Charts and inherit their accessibility. For grid-specific guidance — screen-reader semantics, DOM element order, and virtualisation trade-offs — see the [AG Grid accessibility documentation](https://www.ag-grid.com/javascript-data-grid/accessibility/).