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.
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
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
Colors:
You can customize the colors of your widget in the application.
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 |