Overview
We are continuously improving the accessibility of Pendo features based on the guidelines laid out in WCAG 2.1 Accessibility Standards.
Our first priority is modifying the Guide elements that display in your application, allowing them to be utilized by screen readers and function appropriately for users with a wide range of software accessibility needs.
Badges
Badges are used to activate Guides and the Resource Center. Accessibility enhancements allow them to be opened and closed using the keyboard. You may notice browsers adding a focus state, like an outline around the element, when clicking these elements.
Focus State
Focus states help disabled users use apps without requiring a mouse or touchpad. A focus state can appear as a ring around an element depending on CSS styling. Chrome versions 83+ allow you to style focus elements in your app. We are developing ways to set focus styles in Pendo.
Focus ring example provided by Google
HTML Tag - Input
Badges use the input tag in the HTML. They will likely inherit any properties assigned to input in your CSS styling. Previously, Badges used the img tag.
Example of the Resource Center Badge inspected with Dev Tools
Update Badges to use Accessible Tags
Guides and Resource Centers saved and published after November 18, 2020 use accessible Badge elements.
To update Badges to the new HTML tags
1. Open the Guide or Resource Center in the Visual Design Studio.
2. Save the Guide or Resource Center, even if no changes are made to the content.
3. Publish the Guide or Resource Center. If a Guide is already published the change should go into effect automatically. Resource Centers must be promoted through staging and into production to use the updated Badge.
Adjust the Resource Center Badge Focus State
The focus state can be modified or hidden using the CSS styling in your application.
This CSS sample hides the focus outline but also makes the Resource Center less accessible. We recommend changing the focus styling to better match your application while being mindful of color contrast requirements instead of hiding the outline entirely.
._pendo-resource-center-badge-image:focus {
outline-style: none !important;
}