Accessibility Support
Out of the box, the Telerik and Kendo UI PivotGrid provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
The PivotGrid 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 PivotGrid is a composite component that consists of two logically separated structural elements:
- Data Grid (
role="grid"
); - Configurator (
role="dialog"
);
Data Grid
The element with role="grid"
- includes the row headers, column headers, and data tables.
Grid element
Selector | Attribute | Usage |
---|---|---|
.k-pivotgrid | role=grid | The role specifies the element is a Data Grid. |
Column Headers
Selector | Attribute | Usage |
---|---|---|
.k-pivotgrid-column-headers>.k-pivotgrid-table | role=presentation/none | Negates the default semantic role of the <table> element. |
.k-pivotgrid-empty-cell | role=columnheader | Announces the empty cell role as a part of the programmatically constructed a11y tree. |
aria-colspan | Sets the correct aria-colspan corresponding to the number of columns in the row headers table. | |
aria-rowspan | Sets the correct aria-rowspan corresponding to the number of rows in the column headers table. | |
id | Sets an unique identifier for the cell to be referenced from the first row in the column header table aria-owns attribute. | |
.k-pivotgrid-empty-cell>.k-sr-only | undefined | The empty cell should have a nested span.k-sr-only element containing the localizable text message that will be announced by screen readers when the empty cell is focused. |
.k-pivotgrid-column-headers>.k-pivotgrid-table>tbody | role=rowgroup | Required as the owner <table> element has its semantic role removed. |
.k-pivotgrid-column-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-row | role=row | Required as the owner <table> element has its semantic role removed. |
.k-pivotgrid-column-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-row:first-child | aria-owns | Lists the IDs of the .k-pivotgrid-empty-cell element AND all TD elements, children of the first column headers row (in the correct order - EmptyID td1ID td2ID ... ), to construct the a11y tree. |
.k-pivotgrid-column-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-row>th | role=columnheader | Required as the owner <table> element has its semantic role removed. |
aria-expanded=true/false | Indicates the current expanded state of the header. | |
id | Unique and deterministic identifier, used to associate the header cell with respective data cells. | |
.k-i-arrow-chevron-up,.k-svg-i-arrow-chevron-up | aria-hidden=true | Excludes the collapse icon from the screen reader output. |
.k-i-arrow-chevron-down,.k-svg-i-arrow-chevron-down | aria-hidden=true | Excludes the expand icon from the screen reader output. |
Row Headers
Selector | Attribute | Usage |
---|---|---|
.k-pivotgrid-row-headers>.k-pivotgrid-table | role=none/presentation | Negates the default semantic role of the <table> element. |
.k-pivotgrid-row-headers>.k-pivotgrid-table>tbody | role=rowgroup | Required as the owner <table> element has its semantic role removed. |
.k-pivotgrid-row-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-row | role=row | Required as the owner <table> element has its semantic role removed. |
aria-owns=[IDs of corresponding data cells] | Used to associate row header cells with the corresponding data cells. | |
.k-pivotgrid-row-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-row>th | role=rowheader | Required as the owner <table> element has its semantic role removed. |
aria-expanded=true/false | Indicates the current expanded state of the header. | |
.k-i-arrow-chevron-up,.k-svg-i-arrow-chevron-up | aria-hidden=true | Excludes the collapse icon from the screen reader output. |
.k-i-arrow-chevron-down,.k-svg-i-arrow-chevron-down | aria-hidden=true | Excludes the expand icon from the screen reader output. |
Grid Data Table
Selector | Attribute | Usage |
---|---|---|
.k-pivotgrid-values>.k-pivotgrid-table | role=none/presentation | Negates the default semantic role of the <table> element. |
.k-pivotgrid-values>.k-pivotgrid-table>tbody | role=none/presentation | The contained rows are associated with their headers through alternative mechanics. |
.k-pivotgrid-values>.k-pivotgrid-table>tbody>.k-pivotgrid-row | role=none/presentation | The rows are associated with their headers through alternative mechanics. |
.k-pivotgrid-values>.k-pivotgrid-table>tbody>.k-pivotgrid-row>td | role=gridcell | Required as the owner <table> element has its semantic role removed. |
id | Unique and deterministic identifier, used to associate the data cell with respective row header cells. | |
aria-describedby=[IDs of corresponding column header cells] | Used to associate the data cells with the respective column header cells. |
Configurator
The element with role="dialog"
- includes the configurator header, content (fields, columns, rows, and values sub-sections), and actions (cancel and apply buttons) sections.
Configurator Button Element
Selector | Attribute | Usage |
---|---|---|
.k-pivotgrid-configurator-button | aria-hidden=true | Hide the element from the assistive technologies, as it is not focusable, and there are designated shortcuts for opening and closing the configurator. |
Configurator Wrapping Element
Selector | Attribute | Usage |
---|---|---|
.k-pivotgrid-configurator | role=dialog | The role specifies the element is a dialog. |
aria-hidden=true/false | Specifies whether the configurator is visible if it is still in the DOM when closed. | |
aria-labelledby=.k-pivotgrid-configurator-header-text id | Associates the configurator wrapper with its internal header element. |
Configurator Internal Elements
Selector | Attribute | Usage |
---|---|---|
.k-pivotgrid-configurator-header-text | id | Unique and deterministic identifier, used to associate the header text with elements that need to use it as a label. |
.k-pivotgrid-configurator-content .k-label | id | Unique and deterministic identifier, used to associate the label text with elements that need to use it as a label. |
.k-pivotgrid-configurator-actions .k-button | aria-disabled=true/false | Announces the disabled state of the configurator Cancel and Apply buttons. |
.k-fields-list-wrapper .k-treeview | aria-labelledby | Associates the fields chooser TreeView with the Fields section and Configurator header texts by setting the aria-labelledby attribute to the id of the .k-pivotgrid-configurator-header-text element, followed by a space and the id of the Fields label element |
.k-pivotgrid-configurator-content .k-chip-list | aria-labelledby | Associates the rows, columns and measures Chiplists with their respective section label and Configurator header texts by setting the aria-labelledby attribute to the id of the .k-pivotgrid-configurator-header-text element followed by a space and the id of the Rows/Columns/Values label element |
Managing the Focus
The PivotGrid component is a container that consists of two logically separated structural elements:
- Data Grid (
role="grid"
); - Configurator (
role="dialog"
);
Opening and closing the Configurator is controlled through dedicated shortcuts, and focus is trapped in the respective section once an element inside it gets focused. Closing the Configurator returns focus to the Data Grid.
Data Grid Focus
The Data Grid is a single tab stop component. Upon focusing the Data Grid, the initial focus is set to either the previously focused cell (if any), or the first data (<td>
) cell in the Data Grid. The change of the focused cell should be implemented using one of the following two techniques:
- Roving TabIndex components Practice for managing the focus. Meaning that going through the cells will update the tabindex of the cell.
- Active descendant - keeping the focus always on the Data Grid and using the
aria-activedescendant
on the Data Grid element which points to the id of the currently focused cell. - When the Configurator is available, opening it moves the focus to the first focusable element inside. The focus is trapped and wrapped, meaning the focusable components inside will follow their natural tab index, and when the last/first element is reached
Tab
/Shift-Tab
will focus the first/last element respectively. - Pressing
Escape
while the Configurator is opened and contains the focus, closes the Configurator panel and returns focus to the last focused PivotGrid cell or the first cell if no PivotGrid cell was previously focused.
Keyboard Shortcuts
All Grid cells
Shortcut | Behavior |
---|---|
Right Arrow | Moves focus one cell to the right (if any) |
Left Arrow | Moves focus one cell to the left (if any) |
Down Arrow | Moves focus one cell down (if any) |
Up Arrow | Moves focus one cell up (if any) |
Home | Moves focus to the first cell in the row that contains focus. |
End | Moves focus to the last cell in the row that contains focus. |
Ctrl/Cmd(Mac) + Home | Moves focus to the first (top-left) data cell in the grid. |
Ctrl/Cmd(Mac) + End | Moves focus to the last cell in the last row of the Grid. |
o | Opens the configurator when available. |
Escape | Closes the configurator when available and open. |
Grid header cells
Shortcut | Behavior |
---|---|
Enter & Space | If the header cell is expandable, toggles the current expanded state. |
Configurator*
Shortcut | Behavior |
---|---|
Escape | Closes the Configurator and returns focus to the last focused PivotGrid table cell (or the first cell). |
Tab | Focuses the next focusable element or the first focusable element, if the focus is on the last focusable element. |
Shift + Tab | Focuses the previous focusable element or the last focusable element, if the focus is on the first focusable element. |
Backspace & Delete | Applicable when a Chip is focused. Removes the Chip, and the previous focusable element is focused. |
Ctrl/Cmd(Mac) + Shift + Left/Right Arrow | Applicable when a Chip is focused. Switches the Chip with the next/previous one from the same section (if one is available). |
Ctrl/Cmd(Mac) + Shift + Up/Down Arrow | Applicable when a Chip is focused. Moves a Chip from the Rows section to the Columns one or vice-versa. |
Alt/Opt(Mac) + Down Arrow | Opens the Chip menu for the focused Chip. Focus goes to the first menu element is trapped in the menu popup. |
Configurator Chip Menu*
Shortcut | Behavior |
---|---|
Escape | Closes the menu and returns the focus to the Chip that triggered it. |
Tab | Focuses the next focusable menu element or the first focusable element, if the focus is on the last focusable element. |
Shift + Tab | Focuses the previous focusable element or the last focusable element, if the focus is on the first focusable element. |
Enter | Triggers the default action associated with the focused menu item. |
* All inner Confurator and Chip Menu components follow their own keyboard navigation behavior when focused.
Testing
The PivotGrid has been extensively tested automatically with axe-core and manually with the most popular screen readers.
Screen Readers
The PivotGrid has been tested with the following screen readers and browsers combinations:
Environment | Tool |
---|---|
Firefox | NVDA |
Chrome | JAWS |
Microsoft Edge | JAWS |