Assigning WAI-ARIA roles to a Dynamic Layout
Make your application more accessible to users with disabilities by adding semantic information about the role of a layout on a page. When you define the role of a layout in your UI, you provide screen reader users with the information that they require to successfully navigate your application.
When you develop your application, Pega Platform automatically assigns WAI-ARIA roles to the screen layout (see WAI-ARIA roles in a screen layout). Other layouts in the system do not have default accessibility roles when you create them. For most use cases, the blank setting is sufficient. However, when you design a layout that behaves in an unconventional way, you must assign a WAI-ARIA roles to that layout by hand.
For example, your page might include a large layout that you can click. Because the default
role for the layout is blank, a screen reader ignores the layout and does not inform the
user that it can be clicked. If you assign a button
role to the layout by hand, the
screen reader can interpret the header correctly.
- In the navigation pane of Dev Studio, click Records.
- Expand the User Interface category, and then click Section.
- Open the section that you want to edit.
- If your section uses a template, in the section editor header, click convert to full section editor, and then confirm the conversion.
- Select the dynamic layout to which you want to assign a WAI-ARIA role, and then click
the View properties icon.
- In the Accessibility section, in the Role
type list, define the general role of the layout:
- To mark a layout as a primary part of the page, such as a form, select Landmark.
- To mark a layout as a structural, non-interactive part of the page, such as a header, select Document structure.
- To mark a layout as an interactive part of the page, such as a link, select Component/Widget.
- In the Value field, select the specific role for the layout.
- In the Label field, provide a short, meaningful description of the content of the layout, and then click Submit.
- On the design template form, click Save.
Previous topic Setting the navigation menu to permanently expanded Next topic Setting PDF file versions