Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

Accessible navigation in tables

Updated on February 7, 2024

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.

Note: Updated navigation patterns are available for Pega Platform version 8.7.6.

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.
Note: Using the JAWS Ctrl + Alt + Arrow keys command is not recommended. If your table includes interactive elements, such as links, this setup causes the following issues:
  • Navigation does not support interactions in the forms mode when you enter the table with Tab.
  • Navigation is supported only in browse mode when you enter the table by using the T key.

In addition, the table toolbar includes a Keyboard icon that opens an overlay with table navigation instructions.

The Keyboard icon in the upper-right corner of the table
A table with a Keyboard button in the upper-right corner and displayed 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.

For example: Structure of the readout provided when the user navigates to a column header:
<column header name> column header 
Action button collapsed 
Column header 
To activate press Enter.

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.

For example: Structure of the readout provided when the user navigates to a column header:
<Column header name> column header 
 Actions button collapsed    
<Column header> sorted in ascending order. Filtered column 
To activate press Enter. 

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.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us