Skip to main content


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

Supported keyboard navigation

Updated on October 17, 2022
Applicable to Cosmos React and Theme Cosmos applications

Accessible UI components provide run-time behavior that helps users who rely on assistive technology (AT) to navigate your application with less effort.

UI components are developed in accordance with WAI-ARIA Authoring Practices 1.1. Consequently, most Pega UI components support accessible navigation without additional markup or configuration.

Accessible UI components

The following table lists the most important accessibility components along with the corresponding keyboard navigation:

Control/featureKeyboard navigationAdditional information
Accordion layout
  • Tab to change focus
  • Up arrow and Down arrow to navigate between accordion headers
  • Home to skip to the first tab
  • End to skip to the last tab
  • Pressing Tab from the header moves the focus to the first editable field in the container.
  • In numbered accordions, the numbers do not receive focus.
AJAX containers
  • Tab to change focus
  • Left arrow and Right arrow to navigate between tabs
Pressing Tab from the header moves the focus to the first editable field in the container.
ButtonsEnter or Spacebar to activateButtons include unique IDs to help AT manage page focus.
Collapsible layout
  • Tab to skip to a control in the header (if expanded) or outside the header (if collapsed)
  • Up arrow and Down arrow to navigate between tabs
  • Home to skip to the first tab
  • End to skip to the last tab
Screen readers announce whether the layout is expanded or collapsed.
Controls
  • Enter or Spacebar to engage with the control
  • Arrow keys to navigate
Dynamic layoutsTab to change focus
Error messagesEnter to close the alert box
  • For client-side validation errors, the AT reads the error message in the alert box and moves focus to the first field that contains an error.
  • For server-side validation errors, the AT reads the error banner and moves focus to the first field that contains an error.
  • For errors in tabs, the AT announces errors when the focus falls on the tab header.
Field-level error messagesNoThe message is readable when a change causes the error, such as a failed validation.
IconsYesAlternative text is configurable.
Menu layoutUp arrow and Down arrow to navigate between items
Modal windowsEsc to close
OverlaysYes
Read-write controlsYesLabels and text alternatives are configurable.
Registry of keyboard shortcutsN/ATabs, arrows, and all modifier keys are stored in a single file location.
Repeating dynamic layout
  • Tab to enter and exit the repeating dynamic layout
  • Arrow keys to navigate between repeating sections
  • Enter key to engage with items in the repeating section
  • Esc key to leave an interactive item in a repeating section
  • Right arrow and Left arrow keys to navigate inside the repeating section
  • When focus rests on the layout, the AT reads the summary information about the layout and the number of rows in the layout.
  • After loading new content, the focus rests on the newly added elements.
  • You can revert to tab navigation by selecting the Use form navigation (by tab) check box in the Accessibility node of the layout properties.
Rich text editorYesThe text is fully editable by keyboard.
Screen layoutsTab to change focus
Skip to content areaYes
SmartInfoTab to change focus
Smart tipsYesThe parent control receives focus.
Stacked layoutTab to change focusThe header and container do not receive focus.
Tables
  • Tab to exit the table
  • Arrow keys to navigate between cells or interactive items in a cell
  • Enter to engage with interactive items in a cell
  • Esc to deselect an interactive item in a cell
  • If the table cell contains a component with which the user can interact, the focus rests on that component when you press Enter.
  • The AT reads the header label as a button to inform the user that the label is a clickable element that enables sorting.
Tabs
  • Tab to change focus
  • Left arrow and Right arrow to navigate
  • Home to skip to the first tab
  • End to skip to the last tab
  • The component is activated automatically on focus.
  • The AT reads the tab name when the focus falls on the tab pane.
    Note: To ensure compliance with WCAG standards, the ShowNextError feature was discontinued in the 8.6 version of Pega Platform.
Wait indicatorN/AThe system can inform the AT about loading status. You can edit the load text in the pyThrobberLoadingText rule.

Tags

Pega Platform 8.6 User Experience

Have a question? Get answers now.

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

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us