Skip to main content

WAI-ARIA roles in a screen layout

Suggest edit Updated on April 22, 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:

Did you find this content helpful? YesNo

100% found this useful

Have a question? Get answers now.

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

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