@progress/wct-a11y-spec/dist/vue/aria/spreadsheet_aria.md

Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.

Out of the box, the Kendo UI for Vue 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 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://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 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.

[Menu accessibility specification]({{menu_a11y_link}})

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

[ToolBar accessibility specification]({{toolbar_a11y_link}})

### Name editor


The Name editor must implement the spec for a ComboBox component.

[ComboBox accessibility specification]({{combobox_a11y_link}})

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

[Grid accessibility specification]({{grid_a11y_link}})

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

[DropDownButton accessibility specification]({{dropdownbutton_a11y_link}})

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

[TabStrip accessibility specification]({{tabstrip_a11y_link}})

### Tab Menu button


The Menu button is each TabStrip tab must implement the DropDownButton specification.

[DropDownButton accessibility specification]({{dropdownbutton_a11y_link}})

## Section 508


The Spreadsheet is fully compliant with the [Section 508 requirements](http://www.section508.gov/).

## Testing


The Spreadsheet has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.

> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).

### Screen Readers


The Spreadsheet has been tested with the following screen readers and browsers combinations:

| Environment | Tool |
| ----------- | ---- |
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |