Make the Widget more accessible

What is Accessibility and WCAG?

Web Content Accessibility Guidelines (WCAG) defines how to make Web content more accessible to people with disabilities. Although these guidelines cover a wide range of issues, they cannot address the needs of people with all types, degrees, and combinations of disability. These guidelines also make Web content more usable by older individuals with changing abilities due to aging and often improve users' usability.

Why is it relevant?

It is crucial to provide the end user with the best possible experience through the widget interface. To achieve this, we are listing the recommendations on this page to create a widget with the highest possible accessibility rate.

Recommendation

As an administrator or a designer, you can access Settings > Widget. On this page a lot of customization of the widget is available. 

To provide the best accessibility range, we recommend the following settings: 

 

General settings:

The title is mandatory, we suggest using a short and efficient title and do not use any subtitle.

 

Screenshot 2024-02-28 at 15.06.33.png 

In case of additional zooming by the user, the subtitle may take additional unwanted space and cover the space of the conversation exchange. 

 

Interaction settings:

Enable the following

  • Refresh button
  • Transcript button
  • WCAG Zoom-compliant
  • Auto close widget
  • Keep session alive
  • Use system fonts (this will improve the CSP)
  • Typing delay - set on 2 or 3 second

    Screenshot 2024-02-28 at 14.56.53.png

Notification messages:

We recommend NOT using the pop-up message. 

In case of additional zooming by the user, the pop-up message may take additional unwanted space and cover the space of the conversation exchange. 

 

Configurable texts:

We recommend using short text for the Message field placeholder and Dropdown field placeholder.

 

Design chatbot:

Enable the following

  • Launcher button
  • Enable close button
  • User can toggle fullscreen

Screenshot 2024-02-28 at 15.09.56.png

 

Colors:

You can customize the colors of your widget in the application.

Screenshot 2024-02-28 at 15.36.06.png

We recommend to use clear color contrasts. The WCAG rules state that the contrast of normal text should be at least 4.5:1 and for large text at least 3:1. How do you measure something like that? Fortunately, there are handy plug-ins for that, such as this Contrast Checker van WebAIM

Low contrast ration 
Fail on WCAG Requirements
High contrast ration 
Pass on WCAG Requirements
Screenshot 2024-02-28 at 15.14.41.png Screenshot 2024-02-28 at 15.15.06.png