LinkedIn
Copied!

Table of Contents

WAI-ARIA roles in a screen layout

Version:

Only available versions of this content are shown in the dropdown
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 position Auto-generated tag WAI-ARIA role Notes
Header <header> banner Empty in theme Cosmos
Center <main> main
Navigation <aside> complementary Not consistent with WAI guidelines
Aside <div> none Not 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?

Have a question? Get answers now.

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