Blazor Spreadsheet Accessibility
Out of the box, the Telerik UI for Blazor 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 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.
Menu accessibility 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. |
ToolBar accessibility specification
Name editor
The Name editor must implement the spec for a ComboBox component.
ComboBox accessibility specification
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
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
| 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
Tab Menu button
The Menu button is each TabStrip tab must implement the DropDownButton specification.
DropDownButton accessibility specification
Section 508
The Spreadsheet is fully compliant with the Section 508 requirements.
Testing
The Spreadsheet has been extensively tested automatically with axe-core and manually with the most popular screen readers.
To report any accessibility issues, contact the team through the Telerik Support System.
Screen Readers
The Spreadsheet has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
|---|---|
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |
Keyboard Navigation
For details on how the Spreadsheet keyboard navigation works, refer to the Blazor Spreadsheet Accessibility and Keyboard Navigation Demo.