Accessibility Settings

Updated on October 2, 2018
Download PDF

Ensure that all WalkMe content you produce is accessible to your users even if they have special needs or different abilities. Web accessibility is the inclusive practice of removing barriers that prevent interaction with, or access to, websites, by people with differing abilities.

The Short Version

WalkMe is a major proponent of the concept of equal access to all, and actively seeks to achieve this ideal, especially as it applies to web accessibility, on an ongoing basis. Following proven best practices, WalkMe continually develops and improves its software to follow web accessibility guideline standards. We also actively test our product by differently abled individuals using screen readers and other specialized software.  Many companies must comply with stringent standards when it comes to accessibility and WalkMe continually meets or improves its software to meet these requirements.

Using WalkMe accessibility settings, you can:

  • Use popular screen readers to navigate WalkMe content
  • Create alternative text for images
  • Use special keyboard shortcuts to navigate WalkMe content
  • Configure ARIA labels
  • Modify which elements users interact with on keyboard versus what is visually displayed
Activating Accessibility Features

Accessibility features must be enabled by your Customer Success Manager (CSM)

How it works

WalkMe strives to support the AA standard of the Web Content Accessibility Guidelines 2.0 (WCAG 2.0), one of the leading specifications defining standards of accessibility for the web. This standard defines three levels of conformance: A (lowest, 25 success criteria), AA (13 additional success criteria), and AAA (highest, 23 additional success criteria). WCAG standards are organized around four basic principles:

  • Perceivability—information presented may not be invisible to all of the end-users’ senses
  • Operability—end-users must be able to operate the interface
  • Understandability—end-users must be able to understand the information presented
  • Robustness—end-users must continue to be able to access the content, even as new technologies are incorporated into the content

Text Alternatives:

WalkMe offers a convenient UI in the Rich Text Editor for adding “alt” tags for images and “title” tags for iFrames:

richtexteditor_iframe_alttext
Alt Text Field for iFrames using Rich Text Editor
Alt Text for Images
Alt Text for Images

 

 

 

 

 

 

 

 

Adaptable Content:

WalkMe elements have ARIA tags and semantic HTML markup to support assistive technology with identifying their structure, roles and functionality:

accessibility_aria-label_adaptivehtml

Keyword Accessibility:

The complete functionality of all WalkMe modules is accessible through a keyboard interface.

E.g., use the TAB key to navigate through clickable elements (Launchers, menu items, buttons, etc.), use the Enter key to click on action buttons, and use the ESC key to close dialogs such as balloons, Shoutouts and the WalkMe menu.

Focus Order and Focus Visible:

WalkMe sets a predefined focus order for its various elements, and displays a visible border around elements that receive focus, making the experience consistent, predictable and logical.

Screen Reader Availability:

WalkMe focuses on the most popular screen readers in the market, along with their common browser combinations:

  • JAWS with Chrome and Internet Explorer.
  • NVDA with Firefox.
  • Windows-Eyes with Internet Explorer.
  • VoiceOver with Safari.

Activating and Using the Accessibility Tab

Activation

For now, activation of Accessibility features is done by WalkMe. Notify your Customer Success Manager if you would like the features activated.

Once activated, the Accessibility Tab is available in the Step Options menu for Smart Walk-Thrus and Walk-Thrus:

Image of Accessibility options in Step Options menu

Using the Balloon Focus toggles

Screen readers are able to identify elements in the UI that are in-focus, meaning elements that are selected where the user may decide to interact with them. For example, a screen reader may identify that a specific text field is in-focus, giving the user the option to add input or move to another element. This is visually shown as an outline by most web browsers. To change which element is in focus with a screen reader, users often use their keyboard to navigate the UI.

Based on accessibility best practices, WalkMe announces and focuses the screen reader on balloons when they appear on-screen. Keyboard focus is also locked to the balloon and the specific element selected, making it easy for the user to interact with the on-screen guidance. This gives the end user a similar experience to the visual user. If, however, you wish the screen reader and keyboard navigation to be able to move through all interactive elements and fields and provide the full context of the UI you may alter the default settings.

Balloon Focus allows you to modify how screen readers focus and navigate UI elements when WalkMe balloons appear on-screen.

Balloon focus settings in accessibility tab

  • Auto-focus grab: By turning this toggle to OFF, the given balloon’s focus-stealing behavior will be canceled, and it will not automatically retain focus upon appearance (only when tabbed to).
  • Focus lock: By default, keyboard focus will be locked around the balloon and its captured elements, and keyboard users can’t navigate away. Turning this toggle to OFF will disable this behavior for the specific balloon, and the keyboard user will be able to navigate to the rest of the page. Focus lock does not mean the user can’t stop a Walk-Thru; this option is always available by clicking ESC.
  • Disabling these toggles is NOT recommended unless specifically required to adjust the desired behavior. Please note that these are turned on by default in order to provide keyboard users with real-time updates of balloon appearances, and helps them stay in the context of the Walk-Thru.
  • When Spotlight is toggled ON for a specific balloon, these two toggles will be disabled, as the focus will be locked and retained for all users (the following warning will be displayed):Image of Balloon Focus menu in Accessibility Tab

Using ARIA configuration (currently only aria-label)

Aria-labels provide an alternate piece of text that describes the purpose, structure, role, and functionality of UI elements for assistive technologies. For example, there might be an “X” that closes a popup window. This element does not have a proper label for a screen reader so an aria-label may be added to it in the HTML code so a screen reader can identify it as “close”.

In accordance with the WCAG 2.0 Guideline 1.3.1 (reference), WalkMe elements have ARIA tags and semantic HTML markup to support assistive technology. From the configuration panel, you may create a custom aria-labels for balloons.

  • Default: Balloon aria-label will be set to the balloon’s title by default. When the title is unavailable, aria-label will fall-back to “Guidance Balloon” or another default label of your choosing.
  • Custom: Use this option if there is need to set a different aria-label than the default. Might be necessary if, for example, the balloon’s title relies on another visual representation on the page to be understood, the label may not be clear enough for screen reader users.
Multi Language Support

Aria-label is not represented in the Multi-Language panel, so custom label will be unified across all languages.

Using Accessible Capture

In some cases, captured elements are selected for aesthetic reasons, but they are not necessarily the elements that the user needs to interact with. In these cases, the focus will be locked around the incorrect element. Accessible capture will change the captured elements only for keyboard navigation, even though visually the element will stay in the same place.

image of Related Accessible Element options in Accessibility tab

  • Default: Use the element that was initially captured by the Walk-Thru builder.
  • On-screen element: Use this option to reselect element using capture mode. Note that this functionality does not have element precision and other advanced options present in other parts of the system.
  • JQUERY: Use this option to reselect elements using jQuery.

Was this article helpful?

Related Articles