Accessibility testing is used to ensure an application is accessible to those with disabilities. There are various tools available to help identify accessibility issues in your application. This post will talk about the Accessibility Inspector, a new tool introduced in Pega 8.1, and will also cover some external tools that we have found to be particularly useful while testing for our own accessibility problems.
The Accessibility Inspector was built to highlight some of the common accessibility problems that can occur when building a Pega based application. It highlights issues, and provides helper text on how to fix the issues, in your Pega application.
The tool can be launched from the runtime toolbar, in your end user portals, which is available to users with developer access.
Issues are divided into two main categories: errors and warnings. Errors must be fixed in order for your application to be accessible, warnings are recommended to fix.
A menu option is available in the top right corner of the inspector that gives you additional options such as the ability to show a highlight around all issues or limit what shows up in the inspector tree to only show errors.
A ‘Disability preview’ tool is also available in the tool which applies a color blindness mask to your screen. This preview makes it easier to find any color contrast issues on your screen. Currently this preview only works in Chrome and Firefox due to browser restrictions.
It is recommended that you run this tool against every page in your available portals to help improve the accessibility of your application.
There are various browser extensions available for generic web accessibility testing against WCAG accessibility criteria. The aXe extension (currently available for both Chrome and Firefox) is one that we use extensively at Pega.
If your application is required to be accessible you should always test with a screen reader. A screen reader will read off the content of the screen. It is important to test with a screen reader so that you can determine if the information that is being read off makes sense to an end user.
JAWS is a screen reader we use internally at Pega for testing. There are also many other popular screen readers out on the market including Window-Eyes, Dolphin Supernova and ZoomText
Considerations for Mobile Testing:
For mobile specific testing we recommend using a browser extension on a desktop machine against your portal.
For iOS devices you can activate VoiceOver and swipe through each item. Make sure each label is being read back in a way that gives a full context of what is happening. You should be able to see and visit the various areas of your application using the VoiceOver rotor. For Android testing you can use the TalkBack feature built into the Android Operating system.
Does the 508 findings displayed using the Accessibility Inspector show its mapping to the appropriate WCAG 2.0/2.1 standard?
For example, in the screenshot displaying accessibility issues using the accessibility inspector, there is an issue with labels. Does the accessibility inspector point to, or reference the WCAG 2.0/2.1 standard 3.3.2 or 2.4.6?