Skip to main content


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

WAI-ARIA roles in a screen layout

Updated on December 13, 2022
Applicable to Cosmos React and Theme Cosmos applications

Screen readers use WAI-ARIA roles to determine what kind of content a layout holds. In Pega Platform, screen layouts have WAI-ARIA roles assigned by default, which improves the accessibility of your application.

By default, the largest area in the screen layout is designated as the main area. Depending on the type of the layout, the other areas might appear as in the following example:

Sample layout structure with areas and roles
The various areas of the UI and the WAI-ARIA roles they take

The following table lists the areas in a screen layout (see Layouts), the corresponding auto-generated HTML tags, and the WAI-ARIA roles that are assigned to those areas by default.

Area positionAuto-generated tagWAI-ARIA roleNotes
Header<header>bannerEmpty in theme Cosmos
Center<main>main
Navigation<aside>complementaryNot consistent with WAI guidelines
Aside<div>noneNot consistent with WAI guidelines

What to do next: Discover more about customizing the main area and applying WAI-ARIA roles to layouts in the following articles:

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.

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

Close Deprecation Notice
Contact us