Search results

Accessibility in JavaScript (ES5) Pivot Table control

08 May 2023 / 2 minutes to read

Accessibility is achieved in the pivot table component through WAI-ARIA standard and keyboard navigation. The pivot table features can be effectively accessed through assistive technologies such as screen readers.

WAI-ARIA

WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript,and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components.

The following ARIA attributes are used in the pivot table:

  • grid (role)
  • row (role)
  • gridcell (role)
  • aria-selected (attribute)
  • aria-expanded (attribute)
  • aria-sort (attribute)
  • aria-busy (attribute)
  • aria-invalid (attribute)
  • aria-grabbed (attribute)
  • aria-owns (attribute)
  • aria-label (attribute)

Keyboard Navigation

All the pivot table actions can be controlled via keyboard keys. The applicable key combinations and its relative functionalities are listed below.

Interaction Keys Description
Home Goes to the first cell.
End Goes to the last cell.
Ctrl + Home Goes to the first row.
Ctrl + End Goes to the last row.
DownArrow Moves the cell focus downward.
UpArrow Moves the cell focus upward.
LeftArrow Moves the cell focus left side.
RightArrow Moves the cell focus right side.
Enter If current cell is in value sort state, then it performs value sorting. If the current cell is an expand/collapse cell then it performs expand/collapse operation (drill operation).
Tab If the current is in focus, then moves the cell selection right side. If no cells are focused, then it moves to the next active element in the browser page.
Shift + Tab If the current is in focus, then moves the cell selection left side. If no cells are focused, then it moves to the previous active element in the browser page.
Delete Removes selected field from the Grouping Bar/Pivot Field List.