PivotGrid

The PivotGrid represents multidimensional data in a cross-table format.

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
SelectorAttributeUsage
.k-pivotgridrole=gridThe role specifies the element is a Data Grid.
Column Headers
SelectorAttributeUsage
.k-pivotgrid-column-headers>.k-pivotgrid-tablerole=presentation/noneNegates the default semantic role of the <table> element.
.k-pivotgrid-empty-cellrole=columnheaderAnnounces the empty cell role as a part of the programmatically constructed a11y tree.
aria-colspanSets the correct aria-colspan corresponding to the number of columns in the row headers table.
aria-rowspanSets the correct aria-rowspan corresponding to the number of rows in the column headers table.
idSets 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-onlyundefinedThe 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>tbodyrole=rowgroupRequired as the owner <table> element has its semantic role removed.
.k-pivotgrid-column-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-rowrole=rowRequired as the owner <table> element has its semantic role removed.
.k-pivotgrid-column-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-row:first-childaria-ownsLists 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>throle=columnheaderRequired as the owner <table> element has its semantic role removed.
aria-expanded=true/falseIndicates the current expanded state of the header.
idUnique and deterministic identifier, used to associate the header cell with respective data cells.
.k-i-arrow-chevron-up,.k-svg-i-arrow-chevron-uparia-hidden=trueExcludes the collapse icon from the screen reader output.
.k-i-arrow-chevron-down,.k-svg-i-arrow-chevron-downaria-hidden=trueExcludes the expand icon from the screen reader output.
Row Headers
SelectorAttributeUsage
.k-pivotgrid-row-headers>.k-pivotgrid-tablerole=none/presentationNegates the default semantic role of the <table> element.
.k-pivotgrid-row-headers>.k-pivotgrid-table>tbodyrole=rowgroupRequired as the owner <table> element has its semantic role removed.
.k-pivotgrid-row-headers>.k-pivotgrid-table>tbody>.k-pivotgrid-rowrole=rowRequired 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>throle=rowheaderRequired as the owner <table> element has its semantic role removed.
aria-expanded=true/falseIndicates the current expanded state of the header.
.k-i-arrow-chevron-up,.k-svg-i-arrow-chevron-uparia-hidden=trueExcludes the collapse icon from the screen reader output.
.k-i-arrow-chevron-down,.k-svg-i-arrow-chevron-downaria-hidden=trueExcludes the expand icon from the screen reader output.
Grid Data Table
SelectorAttributeUsage
.k-pivotgrid-values>.k-pivotgrid-tablerole=none/presentationNegates the default semantic role of the <table> element.
.k-pivotgrid-values>.k-pivotgrid-table>tbodyrole=none/presentationThe contained rows are associated with their headers through alternative mechanics.
.k-pivotgrid-values>.k-pivotgrid-table>tbody>.k-pivotgrid-rowrole=none/presentationThe rows are associated with their headers through alternative mechanics.
.k-pivotgrid-values>.k-pivotgrid-table>tbody>.k-pivotgrid-row>tdrole=gridcellRequired as the owner <table> element has its semantic role removed.
idUnique 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
SelectorAttributeUsage
.k-pivotgrid-configurator-buttonaria-hidden=trueHide 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
SelectorAttributeUsage
.k-pivotgrid-configuratorrole=dialogThe role specifies the element is a dialog.
aria-hidden=true/falseSpecifies whether the configurator is visible if it is still in the DOM when closed.
aria-labelledby=.k-pivotgrid-configurator-header-text idAssociates the configurator wrapper with its internal header element.
Configurator Internal Elements
SelectorAttributeUsage
.k-pivotgrid-configurator-header-textidUnique and deterministic identifier, used to associate the header text with elements that need to use it as a label.
.k-pivotgrid-configurator-content .k-labelidUnique and deterministic identifier, used to associate the label text with elements that need to use it as a label.
.k-pivotgrid-configurator-actions .k-buttonaria-disabled=true/falseAnnounces the disabled state of the configurator Cancel and Apply buttons.
.k-fields-list-wrapper .k-treeviewaria-labelledbyAssociates 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-listaria-labelledbyAssociates 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

ShortcutBehavior
Right ArrowMoves focus one cell to the right (if any)
Left ArrowMoves focus one cell to the left (if any)
Down ArrowMoves focus one cell down (if any)
Up ArrowMoves focus one cell up (if any)
HomeMoves focus to the first cell in the row that contains focus.
EndMoves focus to the last cell in the row that contains focus.
Ctrl/Cmd(Mac) + HomeMoves focus to the first (top-left) data cell in the grid.
Ctrl/Cmd(Mac) + EndMoves focus to the last cell in the last row of the Grid.
oOpens the configurator when available.
EscapeCloses the configurator when available and open.

Grid header cells

ShortcutBehavior
Enter & SpaceIf the header cell is expandable, toggles the current expanded state.

Configurator*

ShortcutBehavior
EscapeCloses the Configurator and returns focus to the last focused PivotGrid table cell (or the first cell).
TabFocuses the next focusable element or the first focusable element, if the focus is on the last focusable element.
Shift + TabFocuses the previous focusable element or the last focusable element, if the focus is on the first focusable element.
Backspace & DeleteApplicable when a Chip is focused. Removes the Chip, and the previous focusable element is focused.
Ctrl/Cmd(Mac) + Shift + Left/Right ArrowApplicable 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 ArrowApplicable when a Chip is focused. Moves a Chip from the Rows section to the Columns one or vice-versa.
Alt/Opt(Mac) + Down ArrowOpens the Chip menu for the focused Chip. Focus goes to the first menu element is trapped in the menu popup.

Configurator Chip Menu*

ShortcutBehavior
EscapeCloses the menu and returns the focus to the Chip that triggered it.
TabFocuses the next focusable menu element or the first focusable element, if the focus is on the last focusable element.
Shift + TabFocuses the previous focusable element or the last focusable element, if the focus is on the first focusable element.
EnterTriggers 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:

EnvironmentTool
FirefoxNVDA
ChromeJAWS
Microsoft EdgeJAWS

Resources

Feedback