Accessibility Support
Out of the box, the Telerik and Kendo UI Spreadsheet provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
The Spreadsheet is compliant with the Web Content Accessibility Guidelines (WCAG) 2.2 standards and Section 508 requirements, follows the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) best practices for implementing the keyboard navigation for its component role, provides options for managing its focus and is tested against the most popular screen readers.
WAI-ARIA
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
The Spreadsheet is a composite component that is used to render spreadsheet data and provide the proper means for its editing. It consists of the following structural elements:
- Quick access elements - Undo and Redo buttons
- Menu
- ToolBars
- Name editor
- Formula input
- Sheet area
- Sheets bar Add Button
- Sheets bar Menu Button
- Sheets bar TabStrip
SpreadSheet Wrapping Element
| Selector | Attribute | Usage |
|---|---|---|
.k-spreadsheet | role=application | Indicates the Spreadsheets' role as an application. |
Quick access elements
| Selector | Attribute | Usage |
|---|---|---|
.k-spreadsheet-quick-access-toolbar>.k-button | role=button | The two quick access elements are buttons. |
aria-label or title | The two quick access elements must have labels as they do not have text content. |
ToolBar Menu
The Menu used for selecting the active ToolBar must implement the Menu specification.
ToolBars
All ToolBars must implement the ToolBar specification. Apart from that, they also need to be labeled as per their purpose.
| Selector | Attribute | Usage |
|---|---|---|
.k-spreadsheet-toolbar | aria-label or title | Each ToolBar must have a label specifying its purpose. |
Name editor
The Name editor must implement the spec for a ComboBox component.
Formula input
| Selector | Attribute | Usage |
|---|---|---|
.k-spreadsheet-formula-input | aria-haspopup=menu | Specifies that the formula input opens a popup. |
aria-controls=.k-spreadsheet-formula-list id | Points to the formulas list with role menu. Signifies that the formula input element controls the popup. | |
aria-expanded=true/false | Announces the state of the popup visibility. | |
title | The Formula input of the Spreadsheet must have a title specifying its purpose. | |
role=combobox | The focusable element of the component should have role combobox (an input with popup). |
Formula list
| Selector | Attribute | Usage |
|---|---|---|
.k-spreadsheet-formula-list | id | Unique and deterministic id linked to the aria-controls attribute of the corresponding formula input. |
.k-spreadsheet-formula-list | role=menu | Announces the menu role of the popup. |
.k-list-item | role=menuitem | Announces the menuitem role of the popup items. |
Sheet area
The Sheet area must implement the spec for a Grid component. The column header cells are header cells are the members of the .k-spreadsheet-column-header element. The row header cells are the members of the .k-spreadsheet-row-header element.
Add new sheet button
| Selector | Attribute | Usage |
|---|---|---|
.k-spreadsheet-sheet-add:not(button) | role=button | The add new sheet element is a button. |
.k-spreadsheet-sheet-add | aria-label or title | The add new sheet element must have a label as it does not have text content. |
.k-spreadsheet-sheet-add | aria-controls=.k-tabstrip-items id | Points to the ul element of the TabStrip that contains all tabs. Signifies that the button element controls the tablist one. |
Menu sheet button
The Menu sheet button must implement the spec for a DropDownButton component.
| Selector | Attribute | Usage |
|---|---|---|
.k-spreadsheet-sheets-menu | aria-controls=.k-tabstrip-items id | Points to the ul element of the TabStrip that contains all tabs. Signifies that the button element controls the tablist one. |
Sheets bar
The Sheets bar of the Spreadsheet must implement the TabStrip specification.
Tab Menu button
The Menu button is each TabStrip tab must implement the DropDownButton specification.
Managing the Focus
The Spreadsheet component is a container that consists of several logically separated structural elements:
- Quick access elements Undo and Redo buttons
- Menu
- ToolBars
- Name editor
- Formula input
- Sheet area
- Sheets Bar
Each of them is part of the page tab sequence and can be navigated to using the Tab key of the keyboard. The list above illustrates the focus sequence. The only exception is the Sheet area which implements its own inner Tab-based navigation.
Upon opening any of the Spreadsheet Dialogs, the focus must move to the Dialog and navigation must be trapped within the Dialog. Upon closing the dialog if a manipulation on the Spreadsheet cell has been performed, focus must move to that cell. If no manipulation has been performed, focus must return to the Tool of the ToolBar that has opened the Dialog.
The ToolBars implement the keyboard navigation specification for a ToolBar component.
The Name editor implements the keyboard navigation specification for a ComboBox component.
The Sheets Bar elements are part of the page tab sequence.
Keyboard Shortcuts
Shortcuts applicable to the content of the Spreadsheet
| Shortcut | Behavior |
|---|---|
Ctrl+C | Copies the selected cells (range). |
Ctrl+V | Inserts copied or cut cells to a selected location within the worksheet. |
Ctrl+X | Cuts the selected cells (range). |
Ctrl+Y | Repeats the last action if possible by using the Redo command. |
Ctrl+Z | Reverses the last action if possible by using the Undo command. |
Delete | In the Formula bar, deletes the character to the right of the insertion point from the formula text. In cell selection mode, removes the content from selected cells without affecting cell formats. In cell editing mode, deletes the character to the right of the insertion point. |
Backspace | In the Formula bar, deletes one character to the left from the formula text. In cell selection mode, removes the content of the active cell. In cell editing mode, deletes the character to the left of the insertion point. |
Selection shortcuts
| Shortcut | Behavior |
|---|---|
Ctrl+select a cell | Selects an adjacent or non adjacent cell. |
Ctrl+select cells | Selects a range of adjacent or non adjacent. |
Ctrl+A | Selects the whole worksheet. |
Ctrl+select a row or column | Selects an adjacent or nonadjacent row or column. |
Ctrl+select rows or columns | Selects a range of adjacent or non adjacent rows or columns. |
Shift + Arrow Key | Selects a range of adjacent cells, rows or columns by extending the selection by one cell, row or column. |
Ctrl + Shift + Arrow Key | Extends the selection of cells to the last cell of the current series of data. If there is another set of data afterwards, the cell selection will be extended to the first cell of the new series of data. Otherwise, the cell selection will be extended to the last cell of the worksheet in the corresponding direction. |
Down / Up Arrow | In a menu or submenu, selects the next or previous command. |
Ctrl + Shift + End | In cell selection mode, extends the selection of cells to the last cell on the worksheet located in bottom-right corner. In the formula bar, selects all text in the formula bar from the cursor position to the end. |
Ctrl + Shift + Home | Extends the selection of cells to the beginning (the top-left cell) of the worksheet. In the formula bar, selects all text in the formula bar from the cursor position to the beginning of the input. |
Navigation shortcuts
| Shortcut | Behavior |
|---|---|
Ctrl + Arrow Key | Navigates to the end of the current series of data. If there is another set of data afterwards, the first cell of the new series will be selected. Otherwise, you will be navigated to the last cell of the worksheet in the corresponding direction. |
Arrow Keys | Move one cell up, down, right of left in the worksheet. |
Shift + Tab | In cell selection mode, moves to the previous cell in a worksheet. If the currently active cell is the first cell (the top-left cell) in the Sheet, pressing Shift + Tab will move the focus outside of the Sheet to the Named ranges ComboBox. In a dialog box, moves to the previous focusable element. In range selection of cells, rows or columns, moves to the previous cell within the active range. If the focus is on the first cell (the top-left cell) in the range (the top-left), the focus will return to the last (the bottom-left) cell in the range. |
Tab | In cell selection mode, moves one cell to the right in a worksheet. If the currently active cell is the last cell (the bottom-right cell) in the Sheet, pressing Tab will move the focus outside of the Sheet cells to the next focusable element on the page. In a dialog box, moves to the next focusable element in the Dialog. In range selection of cells, rows or columns, moves to the next cell within the active range. If the focus is on the last cell (the bottom-right cell) in the range, the focus will return to the first cell. |
Page Down | Moves one screen down in a worksheet. |
Page Up | Moves one screen up in a worksheet. |
Home | In cell selection mode, moves to the beginning of a row in a worksheet. In a menu or submenu, selects the first command. |
Ctrl + Home | In cell selection mode, moves to the first cell (the top-left cell) on a worksheet. In the Formula Bar, moves the cursor to the beginning of the text. |
End | In cell selection mode, moves to the far right cell of the active row. In a menu or submenu, selects the last command. |
Ctrl + End | In cell selection mode, moves to the last cell on a worksheet, in the lowest used row of the used column on the bottom-right. In the Formula Bar, moves the cursor to the end of the text. |
Other shortcuts
| Shortcut | Behavior |
|---|---|
Alt + Space | Displays the Control menu for the Spreadsheet window. |
Space | In a dialog box, performs the action for the selected button, or selects or clears a check box. |
Enter | In cell editing mode or in the formula bar, completes a cell entry and selects the cell below. In a data form, it moves to the first field in the next record. In the command toolbar, executes the active action. In a dialog box, performs the action for the default command button in the dialog box. |
Esc | In cell editing mode or in the Formula bar, cancels an entry in the cell or Formula Bar. Closes an open menu or submenu, dialog box or message window. |
Alt + H | Displays the Home tab on the ToolBar. |
Alt + N | Displays the Insert tab on the ToolBar. |
Alt + A | Displays the Data tab on the ToolBar. |
Ctrl (Cmd on MacOS) + Page Up | Activates the previous sheet from the SheetBar if such exists. |
Ctrl (Cmd on MacOS) + Page Down | Activates the next sheet from the SheetBar if such exists. |
Sheets Bar
| Shortcut | Behavior |
|---|---|
Tab | Moves the focus to the next focusable element in the Sheets Bar. If the last element is focused, pressing Tab will move the focus outside of the Spreadsheet. |
Shift + Tab | Moves the focus to the previous focusable element in the Sheets Bar. If the first element is focused, pressing Tab will move the focus to the Sheet area. |
Sheets Bar TabStrip
The SheetsBar TabStrip must implement the TabStrip component keyboard navigation. Each focused tab should support the following key shortcuts:
| Shortcut | Behavior |
|---|---|
Alt (or Opt on Mac) + Down Arrow | Opens the actions DropDownButton popup for the current active tab. |
The button in each tab must implement the DropDownButton component keyboard navigation.
Testing
The Spreadsheet has been extensively tested automatically with axe-core and manually with the most popular screen readers.
Screen Readers
The Spreadsheet has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
|---|---|
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |
