# WCAG
URL: https://pro.rv-grid.com/api/wcag/
Source: src/content/docs/api/wcag.mdx
### `WCAGPlugin`

WCAG Plugin is responsible for enhancing the accessibility features of the RevoGrid component.
It ensures that the grid is fully compliant with Web Content Accessibility Guidelines (WCAG) 2.1.
This plugin should be the last plugin you add, as it modifies the grid's default behavior.

The WCAG Plugin performs the following tasks:
- Sets the 'dir' attribute to 'ltr' for left-to-right text direction.
- Sets the 'role' attribute to 'treegrid' for treelike hierarchical structure.
- Sets the 'aria-keyshortcuts' attribute to 'Enter' and 'Esc' for keyboard shortcuts.
- Adds event listeners for keyboard navigation and editing.
- Creates an optional `aria-live` region for saved edit and validation rejection announcements.

By default, the plugin adds ARIA roles and properties to the grid elements, providing semantic information
for assistive technologies. These roles include 'grid', 'row', and 'gridcell'. The plugin also sets
ARIA attributes such as 'aria-rowindex', 'aria-colindex', and 'aria-selected'.

The WCAG Plugin ensures that the grid is fully functional and usable for users with various disabilities,
including visual impairments, deaf-blindness, and cognitive disabilities.

Note: The WCAG Plugin should be added as the last plugin in the list of plugins, as it modifies the grid's
default behavior and may conflict with other plugins if added earlier.

#### Dependencies

- **Ordering** `after other-grid-plugins`: Register this plugin last because it modifies grid accessibility props after other plugins.

```ts
import { WCAGPlugin, type WCAGConfig } from '@revolist/revogrid-pro';

const wcag: WCAGConfig = {
  announcements: {
    live: 'polite',
    labels: {
      edit: context =>
        'prop' in context
          ? `Saved ${context.columnName} on row ${context.rowNumber}: ${context.value}`
          : `Saved ${context.cellCount} cells`,
      error: context =>
        'prop' in context
          ? `${context.columnName} on row ${context.rowNumber} was not updated`
          : `${context.cellCount} cells were not updated`,
    },
  },
};

const grid = document.createElement('revo-grid');
grid.plugins = [WCAGPlugin];
grid.wcag = wcag;
```

#### Configuration

`grid.wcag` is the preferred configuration API. `additionalData.wcag` is still supported for framework integrations that pass plugin options through a shared `additionalData` object.

```ts
grid.wcag = {
  announcements: {
    enabled: true,
    edit: true,
    error: true,
    live: 'polite',
    atomic: true,
    liveRegionClassName: 'rv-wcag-live-region',
  },
};
```

Set `announcements: false` to disable the live region.
