> For the complete documentation index, see [llms.txt](https://ghiscoding.gitbook.io/slickgrid-universal/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-universal/features/accessibility.md).

# Accessibility (A11y)

SlickGrid Universal is committed to providing accessible data grids for all users, including those using assistive technologies. This document outlines the accessibility features, keyboard navigation, ARIA attributes, and best practices for building inclusive grid experiences.

## Accessibility Features

* **Keyboard Navigation**: Full support for navigating the grid using keyboard only (Tab, Arrow keys, Enter, Space, etc.).
* **ARIA Roles & Attributes**: Proper ARIA roles (e.g., `grid`, `row`, `columnheader`, `cell`) and attributes are applied to grid elements for screen reader compatibility.
* **Focus Management**: Logical focus order and visible focus indicators for all interactive elements.
* **Checkbox & Selection**: Accessible checkboxes in header and rows, with correct labeling and keyboard toggling.
* **Column Menus & Plugins**: Menus and plugins are accessible via keyboard and screen readers.
* **Announcements**: Important grid changes (like selection or sorting) are announced to assistive technologies where possible.

## 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

* The grid root uses `role="grid"`.
* Rows use `role="row"`.
* Header cells use `role="columnheader"`.
* Data cells use `role="gridcell"`.
* Checkboxes and interactive elements have appropriate `aria-checked`, `aria-label`, and `tabindex` attributes.
* Live regions or announcements are used for dynamic updates (where supported).

## Best Practices

* Ensure all custom cell editors and plugins are keyboard accessible.
* Use semantic HTML and ARIA attributes for any custom controls.
* Test with screen readers (NVDA, JAWS, VoiceOver) and keyboard-only navigation.
* Avoid using color alone to convey information; provide text or icon alternatives.
* Keep focus indicators visible and clear.

## Framework Notes

* All framework wrappers (Angular, React, Vue, Aurelia) inherit these accessibility features.
* If you extend or customize the grid, follow the same accessibility patterns.

## Resources

* [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
* [WebAIM: ARIA Landmarks and Roles](https://webaim.org/techniques/aria/)
* [MDN: ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)

***

If you have suggestions or find accessibility issues, please open an issue or pull request to help us improve!


---

# 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.