Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Inspecting accessibility

Updated on December 13, 2022
Applicable to Cosmos React and Theme Cosmos applications

Identify and fix accessibility issues to ensure that users with disabilities can quickly access and efficiently operate your application. By using the Accessibility Inspector tool, you can check what your application looks like to users of varying visual ability and review UI components that are not accessible.

  1. Open the application or portal that you want to inspect.
  2. In the developer toolbar, click the Accessibility icon ().
  3. In the Accessibility Inspector pane, check if your application is compliant with best practices for accessibility:
    1. In the Disability preview list, select the visual ability preview.
      The list includes various types of color blindness to simulate each condition and help you make design decisions.
      For example: Select Protanopia to check if the design and contrast level of your application is suitable for users with red-green confusion.
      Sample UI component with no filter (left) and red-green confusion filter (right)
    2. In the list of issue categories, expand each node, and then navigate to the rules that impact accessibility.
      For example: Click ContentProvide an associated labelDriver to open and edit the section that is missing a label.
      Tip: Not all warnings require an intervention. For example, adding labels to decorative images might crowd out useful information in screen readers.
      List of UI issues in the Accessibility Inspector
      UI issues appear in up to four categories.
  4. Optional: To highlight page elements that are affected by issues, do the following actions:
    1. In the Accessibility Inspector pane, click the Display menu options for Accessibility Inspector icon ().
    2. Click Draw outline around on-page issues.
What to do next: Discover more about accessibility standards and best practices, which reduce the number of issues, in the following articles:
  • Checklist for logging accessibility issues

    Testing an application for accessibility and usability ensures that all users share an equal experience when using your application. Before you submit an incident with Pega Support, check the following preliminary information to get a better understanding of the components involved and to confirm the issue.

  • Key errors reported by the Accessibility Inspector

    Accessibility Inspector helps you discover accessibility issues in your application. By learning about common errors and ways to address them, you can ensure that your application provides the same level of access to users with all levels of ability.

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us