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
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: Some shortcuts may depend on grid configuration or plugins.
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, andtabindexattributes.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
If you have suggestions or find accessibility issues, please open an issue or pull request to help us improve!
Last updated