All Collections
Settings
Accessibility
Accessibility in UserGuiding
Accessibility in UserGuiding

Our efforts to enhance the accessibility of product experiences.

Alican avatar
Written by Alican
Updated over a week ago

The content you generate in UserGuiding is carefully crafted to be inclusive and accessible to all users, including those with disabilities. We are continuously improving the accessibility of UserGuiding features based on the guidelines laid out in WCAG 2.1 Accessibility Standards. Our commitment to an accessible design is rooted in the belief that it fosters a positive user experience for all members of our audience.

WCAG stands for Web Content Accessibility Guidelines. To learn more, check out the info on the World Wide Web Consortium.

Guide accessibility using screen readers and keyboard commands:

Guides are accessible via screen readers and can be interacted with keyboard commands. When a Modal or Tooltip appears on the screen, it will immediately take focus and keep the user inside the material until they progress or dismiss the guide.

Hotspot accessibility using screen readers and keyboard commands:

The tooltips that appear when a Hotspot Beacon is interacted are accessible via screen readers and can also be interacted with via keyboard commands. When a Tooltip appears on the screen it will take focus. The screen reader will also let the user know which element the Tooltip is anchored to as long as that element has an ID associated with it.

The Hotspot Beacons should be placed carefully and the page elements that the beacons are anchored to should also be accessible.

Checklist accessibility using screen readers and keyboard commands:

Whenever a Checklist is opened, through the Checklist Launcher or using any other method, it will immediately take focus and keep the user inside the material until they interact with the Items inside the Checklist or close the Checklist.

Resource Center Accessibility using screen readers and keyboard commands:

Whenever a Resource Center is opened, through the Resource Center Launcher or using any other method, it will immediately take focus and keep the user inside the material until they interact with the Items inside the Resource Center or close the Resource Center.

Survey accessibility using screen readers and keyboard commands:

Whenever a Survey is triggered, it will immediately take focus and keep the user inside the Survey until they progress through the Survey Questions or dismiss the Survey.

Dismiss Option Accessibility for Contrast

For the Quit Icons in the materials the color contrast can be adjusted using the Chrome Extension and Theme Settings inside UserGuiding Panel, to make sure they meet the accessibility requirements.

Screen Readers

Semantic HTML: Organizes headers and paragraph elements to be displayed or read in order by assistive technologies.
ARIA Labels: Text labels so a screen reader can tell the users what they're looking at (images, buttons).

Keyboard Access

Keyboard navigation: Letting users navigate the focus inside an onboarding material without clicking or touching a screen.

A few additional things to note:

  • Links & buttons inside of a tooltip are reachable with a screen reader.

  • If the user tabs out of a Pin (icon w/tooltip) or chooses to close it, the tooltip will be closed.

  • The screen reader will also let the user know which element an “inline” pin is anchored to.

Image Alternative Texts

Alternative text (alt text) conveys the visual or functional details of an image featured on a webpage. UserGuiding allows you to provide Alt-Texts for images that you would like to use within the onboarding materials.

Considering Color

To help color-blind users, UserGuiding content can be delivered in color schemes, contrasts, and themes to ensure end-users can fully understand, interpret, and distinguish all the information presented on screen.

UserGuiding enables you to easily perform the following:

  • Change text color in the text editor in the Google Chrome Extension for Guides and Hotspots.

  • Change widget color in widget configuration settings. (Checklists, Resource Centers, Surveys)

  • Change Guide and Hotpsot color themes in the Themes Page.

Note: This document should not be considered a definitive accessibility guide. UserGuiding content can meet WCAG accessibility standards, but just like your product content, it needs to be designed and implemented appropriately. For example, improper use of custom CSS and images could adversely impact the accessibility of your UserGuiding Onboarding Material experiences.

UserGuiding users that are interested in ensuring the accessibility of their flows and experiences should make sure to test any UserGuiding content along with the rest of their product. UserGuiding does not screen or test published content for accessibility issues.

Did this answer your question?