Pivot Table Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for its web components.

Smart.PivotTable provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-expanded, aria-hidden and others. They are applied to the corresponding elements inside the template of the components.

The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.

There are three major parts of the PivotTable's UI, each with a separate role:

  • Main table - with intrinsic role "table"
  • Toolbar - with role "toolbar"
  • Designer - with role "tablist" (having two "tabpanels" with multiple UI elements inside)

The following ARIA attributes are used in the PivotTable:

  • aria-disabled - indicates that interaction with the PivotTable is disabled.
  • aria-hidden - indicates that the element does not take part in the interaction with the PivotTable and will not be mapped to the accessibility API. For example, the sort arrow icon inside a summary header doesn't provide information for the assistive technology so it should be ignored.
  • aria-multiselectable - indicates that multiple rows in the PivotTable can be selected.
  • aria-selected - indicates a PivotTable row is selected.
  • aria-checked - indicates the checkbox of a PivotTable row is checked.
  • aria-expanded - indicates a PivotTable row is expanded.
  • aria-sort - indicates a column header has applied sorting.
  • aria-owns - indicates a dialog is "owned" by the PivotTable.
  • aria-controls - indicates a dialog controls the settings of the PivotTable.
  • aria-label - defines a string value that labels the elements that provide information or user interaction.
  • aria-labelledby - identifies an element in the PivotTable that labels another element.

Keyboard Interaction

The following keyboard shortcuts are available to interact with the PivotTable:

Key Action
Arrow Right Highlights the next cell in a row.
Arrow Left Highlights the previous cell in a row.
Arrow Up Highlights the cell in previous row of the same column.
Arrow Down Highlights the cell in next row of the same column.
Home Highlights the first cell in a row.
End Highlights the last cell in a row.
Page Up Highlights the first completely visible cell in a column, or if it is already highlighted - scrolls up.
Page Down Highlights the last completely visible cell in a column, or if it is already highlighted - scrolls down.
Enter Toggles a row or a total column header; opens a dialog in the PivotTable's designer; activates a focused button.
Space Toggles row selection; opens a dialog in the PivotTable's designer.
Escape Closes an opened dialog.
F2 When a cell is highlighted, drills down and displays a Table with the original data comprising the cell's summary.

Additional information on WAI-ARIA for the SMART Framework can be found here.