Best practices for configuring UI components
Pega Platform UI components have different levels of out-of-the-box accessibility. By learning about best practices for configuring accessible behavior of UI elements such as controls and layouts, you can improve the user experience for customers who rely on assistive technologies.
Accessible UI components and configurations
The following table lists out-of-the-box accessibility of UI components and recommended configurations that improve their availability to users who are differently abled.
Component | Recommended? | Challenges | Recommended configuration |
Anypicker | No |
| Use a Dropdown. |
Autocomplete | Yes |
| Set placeholder and helper text to None. |
Button | Yes |
| |
Chart | Partially | Graphics are not accessible. |
|
Checkbox | Yes | Issues with label display. |
|
Date Time | Partially |
|
|
Date Time: no typing | No | Cannot access by keyboard. | Use a standard Date Time control. |
Date Time: dropdown | Partially | Labels not visible. | |
Date Time: date range | No |
| Use a standard Date Time control. |
Date Time: time only | No |
| |
Dropdown | Yes |
| |
Dynamic layout | Yes |
| |
Dynamic layout group | Yes | Navigated by using the Tab key. |
|
Hierarchical table | Yes | Navigated by using the Tab key. | |
Hierarchical table (optimized) | Yes |
| |
Icon | Yes |
| |
Integer | Yes | ||
Layout group | Yes | Focus not always clear. | For more information, see Supported keyboard navigation. |
Link | Yes | Include helper text only if you need to add additional context to the link. | |
List | Yes |
| |
Map | Partially | Cannot provide focus or keyboard access for some map features. | |
Modal dialog box | Yes | ||
Multi-select list | Yes | As an alternative, use a separate drop-down list. | |
Navigational tree | No | Cannot access by keyboard. | |
Overlay | Partially |
|
|
Radio buttons | Yes | Issues when used in a table. | Add a title and a heading. |
Repeating dynamic layout | Yes | Navigated by arrow keys. | For more information, see Supported keyboard navigation |
Rich text editor | Yes |
| Disabling the mouse-only Resize option is a best practice. |
Sections | Yes | Add ARIA roles. | |
Slider | No | Cannot access by keyboard. | |
Table (optimized) | Yes |
|
|
Text area | Yes | ||
Text input | Yes |
|
|
Timeline | No | Cannot access by keyboard. |
Previous topic Best practices for accessibility Next topic Best practices for using helper text