Accessible navigation in tables
Tables are a flexible user interface staple that provides a reliable basis for users to view or compare information in a business application. To ensure optimal performance for users who rely on assistive technology, Pega made a number of design decisions about table behavior and navigation patterns in their applications.
To align with the many ways in which applications use tables, Pega has chosen to implement tables using
Role="grid". This role provides the most flexibility, particularly
when introducing interactive elements to your content. In this context, the Pega Platform table component is visually represented as a table, but
semantically still functions and navigates as a grid.
Standard keyboard navigation
The table component follows the standard grid navigation pattern as defined in the W3C Web Content Accessibility Guidelines (WCAG):
- Tab key to enter the table.
- Tab key to exit the table.
- Arrow keys or Shift + Alt + Arrow keys to navigate between cells.
- Enter key to access a cell with multiple interactive
controls in a cell, such as links or buttons.
- Arrow keys to navigate between interactive items.
- Esc to return to table navigation.
In addition, the table toolbar includes a Keyboard icon that opens an overlay with table navigation instructions.
Column headers
If the table has a non-interactive column header, navigating with Arrow keys brings focus directly to the column header and triggers a readout of that header.
On the other hand, in tables with interactions in the column header, navigating with
Arrow keys brings focus to just one focusable element,
namely the always-visible menu button. While the menu button uses an
Actions label, it also includes the column header name in
the aria-describedby attribute, which the screen reader can use for
context.
Sorting and filtering
Column headers with interactive components include an Actions menu button.
The sorting indicator becomes visible when a sort is added to the column. The sort and filter indicators do not take keyboard focus. The only item that can take keyboard focus is the Actions menu.
Cells with controls
When the user navigates to a cell that has a single interaction, such as a link or button, the focus rests directly on the interactive control. The appropriate role is announced to the screen reader.
For cells with multiple interactive controls, Pega Platform follows WCAG guidance:
- When the user navigates to a cell, the screen reader announces the controls.
- Enter key to enter the cell to interact with the controls. The focus rests on the first interactive item in the cell.
- Arrow keys to navigate between controls in a cell.
- Esc key to exit cell navigation and return to the table.
Previous topic Supported keyboard navigation Next topic WAI-ARIA roles in a screen layout