> For the complete documentation index, see [llms.txt](https://ghiscoding.gitbook.io/slickgrid-react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ghiscoding.gitbook.io/slickgrid-react/features/accessibility.md).

# Accessibility (A11y)

React SlickGrid Universal provides the same accessibility features as the core package, including keyboard navigation, ARIA roles, and focus management.

## Accessibility Features

* Keyboard navigation (Tab, Arrow keys, Enter, Space, etc.)
* ARIA roles and attributes for grid, rows, headers, and cells
* Focus indicators and logical tab order
* Accessible checkboxes and selection
* Announcements for important grid changes

## Focus Outline Styling

The a11y focus outline can be customized using the SASS variable `$slick-focus-outline-color` or its CSS equivalent `--slick-focus-outline-color` (CSS custom property). This allows you to style the focus indicator to match your application's design.

**Note:** Header filters have their own box shadow styling and are styled separately.

## Keyboard Navigation

| Key             | Action                                     |
| --------------- | ------------------------------------------ |
| Tab / Shift+Tab | Move focus between grid and other controls |
| Arrow Keys      | Navigate between cells                     |
| Enter           | Activate cell/editor or toggle checkbox    |
| Space           | Toggle selection (checkbox)                |
| Home / End      | Jump to first/last cell in row             |
| Ctrl+Home/End   | Jump to first/last cell in grid            |
| Page Up / Down  | Scroll grid by page                        |

> **Note** cell navigation within the grid requires the grid option `enableCellNavigation: true` to be set.

## ARIA Roles & Attributes

* `role="grid"` on the grid root
* `role="row"` on rows
* `role="columnheader"` on header cells
* `role="gridcell"` on data cells
* Proper `aria-checked`, `aria-label`, and `tabindex` on interactive elements

## Best Practices

* Ensure custom editors and plugins are accessible
* Use semantic HTML and ARIA for custom controls
* Test with screen readers and keyboard navigation
* Avoid color-only cues; provide text or icons
* Keep focus indicators visible

## Notes

* All React-specific features and wrappers follow these accessibility patterns.
* For custom React components, follow the same a11y guidelines.

***

For suggestions or issues, please open an issue or PR.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ghiscoding.gitbook.io/slickgrid-react/features/accessibility.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.