LinkedIn
Copied!

Table of Contents

Supported keyboard navigation

Version:

Only available versions of this content are shown in the dropdown
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/feature Keyboard navigation Additional 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.
Buttons Enter or Spacebar to activate Buttons 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 activate
  • Arrow keys to navigate
Dynamic layouts Tab to change focus
Error messages Enter 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 messages No The message is readable when a change causes the error, such as a failed validation.
Icons Yes Alternative text is configurable.
Menu layout Up arrow and Down arrow to navigate between items
Modal windows Esc to close
Overlays Yes
Read-write controls Yes Labels and text alternatives are configurable.
Registry of keyboard shortcuts N/A Tabs, arrows, and all modifier keys are stored in a single file location.
Repeating dynamic layout
  • Tab to exit the repeating dynamic layout
  • Arrow keys to navigate between items
  • Enter key to select a repeatable item
  • Esc key to deselect a repeatable item
  • Right arrow and Left arrow keys to navigate inside a repeatable item
  • 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 editor Yes The text is fully editable by keyboard.
Screen layouts Tab to change focus
Skip to content area Yes
SmartInfo Tab to change focus
Smart tips Yes The parent control receives focus.
Stacked layout Tab to change focus The 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.
Wait indicator N/A The system can inform the AT about loading status. You can edit the load text in the pyThrobberLoadingText rule.
Did you find this content helpful?

Have a question? Get answers now.

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