This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Screen layout and dynamic container WAI-ARIA accessibility roles

The Pega 7 Platform uses WAI-ARIA (Web Accessibility Initiative Accessible Rich Internet Applications) roles and HTML5 designations to communicate information about on-screen application elements to an assistive technology. WAI-ARIA roles and HTML5 designations appear in the HTML of your application.

Screen layouts

When added to a user interface, a screen layout includes WAI-ARIA roles and HTML5 designations by default. These designations communicate information about the placement and function of the areas within a screen layout to an assistive technology.

Screen layout area HTML5 designation WAI-ARIA role WAI-ARIA label
Top <header> role='banner' aria-label='Top Panel'
Left <nav> role='navigation' aria-label='Left Panel'
Right <aside> role='complementary' aria-label='Right Panel'
Center <main> role='main' aria-label='Center Panel'
Footer <footer> role='contentinfo' aria-label='Bottom Panel'

Dynamic containers

When added to a user interface, a dynamic container is assigned the role of "main" by default. When the application user tabs through the interface, the Skip to main content link is displayed. The user can click that link to go directly to the dynamic container.

Did you find this content helpful?

91% found this useful

Related Content

Have a question? Get answers now.

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