@progress/wct-a11y-spec

[ { "h2": "Accessibility Support" }, { "p": "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." }, { "p": "The Spreadsheet is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for [managing its focus](#managing-the-focus) and is tested against the most popular [screen readers](#screen-readers)." }, { "h3": "WAI-ARIA" }, { "p": "This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any." }, { "p": "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:" }, { "ul": [ "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" ] }, { "h4": "SpreadSheet Wrapping Element" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-spreadsheet`", "Attribute": "`role=application`", "Usage": "Indicates the Spreadsheets' role as an application." } ] } }, { "h4": "Quick access elements" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-spreadsheet-quick-access-toolbar>.k-button`", "Attribute": "`role=button`", "Usage": "The two quick access elements are buttons." }, { "Selector": "", "Attribute": "`aria-label` or `title`", "Usage": "The two quick access elements must have labels as they do not have text content." } ] } }, { "h4": "ToolBar Menu" }, { "p": "The Menu used for selecting the active ToolBar must implement the Menu specification." }, { "link": { "title": "Menu accessibility specification", "source": "{{menu_a11y_link}}" } }, { "h4": "ToolBars" }, { "p": "All ToolBars must implement the ToolBar specification. Apart from that, they also need to be labeled as per their purpose." }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-spreadsheet-toolbar`", "Attribute": "`aria-label` or `title`", "Usage": "Each ToolBar must have a label specifying its purpose." } ] } }, { "link": { "title": "ToolBar accessibility specification", "source": "{{toolbar_a11y_link}}" } }, { "h4": "Name editor" }, { "p": "The Name editor must implement the spec for a ComboBox component." }, { "link": { "title": "ComboBox accessibility specification", "source": "{{combobox_a11y_link}}" } }, { "h4": "Formula input" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-spreadsheet-formula-input`", "Attribute": "`aria-haspopup=menu`", "Usage": "Specifies that the formula input opens a popup." }, { "Selector": "", "Attribute": "`aria-controls=.k-spreadsheet-formula-list id`", "Usage": "Points to the formulas list with role `menu`. Signifies that the formula input element controls the popup." }, { "Selector": "", "Attribute": "`aria-expanded=true/false`", "Usage": "Announces the state of the popup visibility." }, { "Selector": "", "Attribute": "`title`", "Usage": "The Formula input of the Spreadsheet must have a title specifying its purpose." }, { "Selector": "", "Attribute": "`role=combobox`", "Usage": "The focusable element of the component should have role `combobox` (an input with popup)." } ] } }, { "h4": "Formula list" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-spreadsheet-formula-list`", "Attribute": "`id`", "Usage": "Unique and deterministic id linked to the `aria-controls` attribute of the corresponding formula input." }, { "Selector": "`.k-spreadsheet-formula-list`", "Attribute": "`role=menu`", "Usage": "Announces the `menu` role of the popup." }, { "Selector": "`.k-list-item`", "Attribute": "`role=menuitem`", "Usage": "Announces the `menuitem` role of the popup items." } ] } }, { "h4": "Sheet area" }, { "p": "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." }, { "link": { "title": "Grid accessibility specification", "source": "{{grid_a11y_link}}" } }, { "h4": "Add new sheet button" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-spreadsheet-sheet-add:not(button)`", "Attribute": "`role=button`", "Usage": "The add new sheet element is a button." }, { "Selector": "`.k-spreadsheet-sheet-add`", "Attribute": "`aria-label` or `title`", "Usage": "The add new sheet element must have a label as it does not have text content." }, { "Selector": "`.k-spreadsheet-sheet-add`", "Attribute": "`aria-controls=.k-tabstrip-items id`", "Usage": "Points to the `ul` element of the TabStrip that contains all tabs. Signifies that the `button` element controls the `tablist` one." } ] } }, { "h4": "Menu sheet button" }, { "p": "The Menu sheet button must implement the spec for a DropDownButton component." }, { "link": { "title": "DropDownButton accessibility specification", "source": "{{dropdownbutton_a11y_link}}" } }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-spreadsheet-sheets-menu`", "Attribute": "`aria-controls=.k-tabstrip-items id`", "Usage": "Points to the `ul` element of the TabStrip that contains all tabs. Signifies that the `button` element controls the `tablist` one." } ] } }, { "h4": "Sheets bar" }, { "p": "The Sheets bar of the Spreadsheet must implement the TabStrip specification." }, { "link": { "title": "TabStrip accessibility specification", "source": "{{tabstrip_a11y_link}}" } }, { "h4": "Tab Menu button" }, { "p": "The Menu button is each TabStrip tab must implement the DropDownButton specification." }, { "link": { "title": "DropDownButton accessibility specification", "source": "{{dropdownbutton_a11y_link}}" } }, { "h3": "Managing the Focus" }, { "p": "The Spreadsheet component is a container that consists of several logically separated structural elements:" }, { "ul": [ "Quick access elements Undo and Redo buttons", "Menu", "ToolBars", "Name editor", "Formula input", "Sheet area", "Sheets Bar" ] }, { "p": "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." }, { "p": "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." }, { "p": "The `ToolBars` implement the keyboard navigation specification for a `ToolBar` component." }, { "p": "The `Name editor` implements the keyboard navigation specification for a `ComboBox` component." }, { "p": "The `Sheets Bar` elements are part of the page tab sequence." }, { "h3": "Keyboard Shortcuts" }, { "h4": "Shortcuts applicable to the content of the Spreadsheet" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Ctrl+C`", "Behavior": "Copies the selected cells (range)." }, { "Shortcut": "`Ctrl+V`", "Behavior": "Inserts copied or cut cells to a selected location within the worksheet." }, { "Shortcut": "`Ctrl+X`", "Behavior": "Cuts the selected cells (range)." }, { "Shortcut": "`Ctrl+Y`", "Behavior": "Repeats the last action if possible by using the Redo command." }, { "Shortcut": "`Ctrl+Z`", "Behavior": "Reverses the last action if possible by using the Undo command." }, { "Shortcut": "`Delete`", "Behavior": "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." }, { "Shortcut": "`Backspace`", "Behavior": "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." } ] } }, { "h4": "Selection shortcuts" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Ctrl+select a cell`", "Behavior": "Selects an adjacent or non adjacent cell." }, { "Shortcut": "`Ctrl+select cells`", "Behavior": "Selects a range of adjacent or non adjacent." }, { "Shortcut": "`Ctrl+A`", "Behavior": "Selects the whole worksheet." }, { "Shortcut": "`Ctrl+select a row or column`", "Behavior": "Selects an adjacent or nonadjacent row or column." }, { "Shortcut": "`Ctrl+select rows or columns`", "Behavior": "Selects a range of adjacent or non adjacent rows or columns." }, { "Shortcut": "`Shift + Arrow Key`", "Behavior": "Selects a range of adjacent cells, rows or columns by extending the selection by one cell, row or column." }, { "Shortcut": "`Ctrl + Shift + Arrow Key`", "Behavior": "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." }, { "Shortcut": "`Down / Up Arrow`", "Behavior": "In a menu or submenu, selects the next or previous command." }, { "Shortcut": "`Ctrl + Shift + End`", "Behavior": "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." }, { "Shortcut": "`Ctrl + Shift + Home`", "Behavior": "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." } ] } }, { "h4": "Navigation shortcuts" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Ctrl + Arrow Key`", "Behavior": "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." }, { "Shortcut": "`Arrow Keys`", "Behavior": "Move one cell up, down, right of left in the worksheet." }, { "Shortcut": "`Shift + Tab`", "Behavior": "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." }, { "Shortcut": "`Tab`", "Behavior": "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." }, { "Shortcut": "`Page Down`", "Behavior": "Moves one screen down in a worksheet." }, { "Shortcut": "`Page Up`", "Behavior": "Moves one screen up in a worksheet." }, { "Shortcut": "`Home`", "Behavior": "In cell selection mode, moves to the beginning of a row in a worksheet. In a menu or submenu, selects the first command." }, { "Shortcut": "`Ctrl + Home`", "Behavior": "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." }, { "Shortcut": "`End`", "Behavior": "In cell selection mode, moves to the far right cell of the active row. In a menu or submenu, selects the last command." }, { "Shortcut": "`Ctrl + End`", "Behavior": "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." } ] } }, { "h4": "Other shortcuts" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Alt + Space`", "Behavior": "Displays the Control menu for the Spreadsheet window." }, { "Shortcut": "`Space`", "Behavior": "In a dialog box, performs the action for the selected button, or selects or clears a check box." }, { "Shortcut": "`Enter`", "Behavior": "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." }, { "Shortcut": "`Esc`", "Behavior": "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." }, { "Shortcut": "`Alt + H`", "Behavior": "Displays the Home tab on the ToolBar." }, { "Shortcut": "`Alt + N`", "Behavior": "Displays the Insert tab on the ToolBar." }, { "Shortcut": "`Alt + A`", "Behavior": "Displays the Data tab on the ToolBar." }, { "Shortcut": "`Ctrl (Cmd on MacOS) + Page Up`", "Behavior": "Activates the previous sheet from the SheetBar if such exists." }, { "Shortcut": "`Ctrl (Cmd on MacOS) + Page Down`", "Behavior": "Activates the next sheet from the SheetBar if such exists." } ] } }, { "h4": "Sheets Bar" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Tab`", "Behavior": "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." }, { "Shortcut": "`Shift + Tab`", "Behavior": "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." } ] } }, { "h4": "Sheets Bar TabStrip" }, { "p": "The SheetsBar TabStrip must implement the **TabStrip** component keyboard navigation. Each focused tab should support the following key shortcuts:" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Alt` (or `Opt` on Mac) + `Down Arrow`", "Behavior": "Opens the actions DropDownButton popup for the current active tab." } ] } }, { "p": "The button in each tab must implement the **DropDownButton** component keyboard navigation." }, { "h3": "Testing" }, { "p": "The Spreadsheet has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers." }, { "h3": "Screen Readers" }, { "p": "The Spreadsheet has been tested with the following screen readers and browsers combinations:" }, { "table": { "headers": [ "Environment", "Tool" ], "rows": [ [ "Firefox", "NVDA" ], [ "Chrome", "JAWS" ], [ "Microsoft Edge", "JAWS" ] ] } } ]