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.