/ S

JavaScript Data Grid Accessibility

Handsontable is designed to be accessible, aligning with global standards. We prioritize inclusivity, ensuring web applications are usable by people with disabilities.

In this article

Overview

Accessibility features of Handsontable include:

  • Keyboard navigation that lets you use the grid without a mouse.
  • Support for the most popular screen readers.
  • Flexible API to configure keyboard shortcuts and navigation methods.

Conformance with standards

Most global standards and regulations are created in accordance with WCAG (Web Content Accessibility Guidelines). Handsontable meets requirements outlined in the WCAG 2.1 AA (opens new window) guidelines, which makes it compatible with most local standards such as:

Keyboard navigation

Handsontable does not require a mouse to navigate across the grid's elements. This is an important feature for certain users with temporary or permanent motor impairments, for whom following the tiny mouse cursor is difficult. Interestingly, some "power" users also find it easier to use the keyboard instead of the mouse.

Our experience with hundreds of implementations of Handsontable has highlighted some typical patterns. It turns out that usually Handsontable is used as either a spreadsheet application or a data grid component. While the difference may seem subtle at first, it significantly impacts user expectations regarding navigation.

In a typical spreadsheet application (think of Microsoft Excel or Google Sheets), you cannot move the focus onto headers. This makes it difficult to sort or filter data without knowing complex keyboard shortcuts. Additionally, opening a column menu is not trivial. Handsontable offers flexibility in this regard, allowing users to switch between data grid and spreadsheet "modes". To do that switch, you can use a combination of two options: navigableHeaders to enable or disable moving focus onto headers, and tabNavigation to decide if the Tab key can be used to navigate across cells and headers.

The following table provides more details about these two scenarios:

Aspect Data grid mode Spreadsheet mode (default)
Configuration options navigableHeaders: true
tabNavigation: false		 navigableHeaders: false
tabNavigation: true
Primary navigation method Arrow keys Tab / Shift + Tab
Description The Arrow keys are primarily used to navigate across the grid. Use simple shortcut keys such as Enter or Space to open menus or interact with headers, cells, or cell editors.

You cannot use Tab key to navigate across the grid.		 The Tab key is primarily used to navigate across the grid.
This behavior is similar to Excel or Google Sheets.

To open menus, use more complex shortcut keys.
Focus order One Tab stop - the grid is included in the tab sequence within the page only once. Multiple Tab stops - all the grid tabbable elements, such as cells or headers, are included in the page Tab sequence.
Navigable headers Yes No

Shortcut keys

Handsontable provides a wide range of shortcut keys, but some of them seem to be more important for users not using a mouse for navigation. Specifically, actions triggered while navigating across headers involve simple combinations of keyboard keys, making them intuitive and useful. For more complex scenarios, you can also customize the shortcuts keys through the API.

Windows macOS Action Focused element
Shift + Alt + ↓ Shift + Option + ↓ Open a column menu Any cell
Ctrl + Enter Cmd + Enter Open a column menu Column header
Enter Enter Sort data Column header
Alt + A Option + A Clear filters Any cell
Ctrl + Space Ctrl + Space * Select a column Any cell
Shift + Space Shift + Space Select a row Any cell
Ctrl + Shift + \
Shift + F10		 Cmd + Shift + \
Shift + F10		 Open a context menu Any cell

*The keyboard shortcut for selecting an entire column, Ctrl+Space, in macOS by default selects the previous input source. To use this shortcut key in Handsontable, go to macOS settings, then Keyboard / Input Sources and uncheck the corresponding checkbox.

Support for screen readers

Although semantic HTML doesn't need any additional attributes to be properly interpreted by assistive technologies, some of Handsontable's complex features are not fully covered by the HTML specification. That's why Handsontable provides support for screen readers with ARIA attributes (Accessible Rich Internet Applications) applied to its HTML markup.

Each new version is thoroughly tested for accessibility with the following screen readers:

  • NVDA (Windows)
  • JAWS (Windows)
  • VoiceOver (macOS)

A demo of accessible data grid

Check out the interactive demo below to see how different Handsontable settings impact its accessibility level and affect the user experience.

    High-contrast theme

    The recommended minimum contrast ratio (opens new window) for text against images or backgrounds is 4.5:1. To achieve this level of contrast with Handsontable's default theme, customize it to meet your end-users' needs by applying the following actions:

    Requirements for the developers

    When you customize Handsontable, it's you who is responsible for ensuring the accessibility of your solution. Especially when you create custom cell type or custom plugin, remember about making them accessible to everyone.

    Our recommendations for custom development:

    • Test your code against WCAG 2.1 requirements frequently.
    • Use proper color contrast, font size, and semantic HTML.
    • If needed, implement additional WAI-ARIA attributes.
    • Avoid flashing or blinking content.
    • Test your customizations with real users who have different types of disabilities. If you don’t have access to real users, try Funkify (opens new window), a disability simulator, which can help you step into disabled users' shoes.

    TIP

    The quality of custom modifications in Handsontable may impact your application's accessibility level. For this reason, make sure to actively check how these changes influence the overall accessibility of your application, using tools like Lighthouse (opens new window).

    Ensuring Accessibility standards

    We make sure our data grid remains accessible by taking the following steps:

    • We check Handsontable's accessibility score with a range of accessibility testing tools.
    • We use automated visual regression testing.
    • We manually test all of Handsontable's features with the most popular screen readers.
    • We use automated unit and end-to-end tests.

    Known limitations

    • Some screen readers may incorrectly read the number of rows and columns when frozen rows and columns are enabled.
    • The aria-rowcount attribute is intentionally set to "-1" due to most screen readers either ignoring it or misinterpreting it. This setting is particularly aimed at ensuring accuracy with screen readers like VoiceOver. We plan to revise this approach once screen readers consistently handle the aria-rowcount attribute correctly.
    • Dynamic ARIA attributes are sometimes omitted by screen readers.
    • When using frozen rows and columns, NVDA and JAWS may incorrectly announce the current column header, other cells remain unaffected.

    API reference

    For the list of options, methods, and Handsontable hooks related to accessibility, see the following API reference pages:

    Troubleshooting

    Try the following links if you didn't find what you need:

    ← Context menu →