Using the Pega Accessibility Inspector

From PegaWiki
Accessibility - Using the Pega Accessibility Inspector / This is the approved revision of this page, as well as being the most recent.
Jump to navigation Jump to search

Using the Pega Accessibility Inspector

Description Using the Accessibility Inspector
Version as of 8.1
Application Platform
Capability/Industry Area User Experience



Testing for accessibility in your application[edit]

The Accessibility Inspector Icon in the Runtime Toolbar
The Accessibility Inspector Icon in the Runtime Toolbar

Accessibility resides at the forefront of both users’ and developers’ minds when interacting with content on the web. Those who aim to test applications and products for accessibility have a wide variety of testing solutions to choose from, but many aren’t aware that Pega also comes with its own accessibility inspector integrated directly into the authoring experience.

Setting up the Inspector[edit]

To be able to use the Inspector in your end-user portals to check for accessibility issues, you’ll first need to ensure that your operator’s access group has the requisite roles and privileges to see the Runtime Toolbar. Typically, users with developer privileges will be able to see this by default in the bottom-left corner of the screen of end-user portals.  

For other users that need to have privileges added to be able to see the toolbar, we can add the appropriate access role/privileges. One option would be to add an application Administrator access role to a user’s access group, such as PegaRULES:SysAdm4. This should provide the necessary privileges to users with the access role to see the toolbar. Otherwise, you can add the OpenDeveloperForm privilege to an access role within the access group you are modifying and set the privilege level to 5.  

Features of the Inspector[edit]

Page Warnings and errors Identified by the Accessibility Inspector
Page Warnings and errors Identified by the Accessibility Inspector
Options to show only errors and draw outlines around issues on the page
Options to show only errors and draw outlines around issues on the page

Errors and warnings[edit]

Using the Inspector is as easy as expanding the runtime toolbar and activating the Accessibility Inspector button. Once activated, you’ll be presented with an expanded right pane which displays some information and has several buttons you can interact with.  

One of the first things you might notice is the content within the main region of the Inspector panel.  

This area contains a hierarchical list of the accessibility issues found by the inspector on the current page. Items here are grouped by a category which can be expanded to reveal each individual item flagged by the Accessibility Inspector. Each item in the list also has an icon corresponding to the severity of the issue flagged. Expanding a category in the list reveals the source element/rule of the issue, which can be directly opened in Dev Studio.

It is important to note that not each item flagged is necessarily a failure in accessibility requirements, but could be a warning or recommendation to take a closer look at a certain component. For example, adding labels to decorative content may introduce extra verbosity for screen reader users. This would not be flagged as an accessibility issue, but rather a recommendation to make a change for a more user-friendly experience. If you’d like to have the Inspector only display just the errors flagged, activate the menu at the top-right of the Inspector panel to enable this option. This menu also allows for on-page highlighting of which issues have been flagged and where they are on the page.  

Disability previews[edit]

Above the main content in the Accessibility Inspector, we can also choose to preview the current page with a specific visual disability. The four available options for preview are:

  • Achromatopsia (Absence of color)
  • Deuteranopia (Red Green confusion, blindness to green)
  • Protanopia (Red Green confusion, blindness to red)
  • Tritanopia (Yellow Blue confusion)
Options to view the current page with a visual disability preview
Options to view the current page with a visual disability preview

 Selecting an option will modify the styles of the current page to simulate how a visually impaired user might see the page, respective to the disability. For instance, we can select the Deuteranopia preview option in the list to simulate how the screen would appear for a user with red-green color deficiency and understand how the page would appear for such users. Ensuring you have an accessible application both in function and presentation is essential to create an equal experience for your user base.  

Results[edit]

Using the built-in Pega Accessibility Inspector is a great way of testing your app's user interface for any accessibility gaps at any point during the development life cycle. Still, it is recommended to use multiple testing solutions in the accessibility validation of your product. This cross-solution method of testing will ensure the greatest amount of accessibility gaps are identified sooner in your application. For an exhaustive list of several of the commonly-used and available accessibility testing tools, see the Accessibility KnowledgeHub page on Accessibility tools