We are delighted to announce the launch of Chat2Impact., built for the non-profit sector.

Chatbot Widget Accessibility

Share this post

Introduction

The greatest value that chatbots provide is enabling users to access services and information in an easy and intuitive way. Therefore, it is crucial that organisations are able to offer this digital channel in the most accessible way to all their potential users.

One way in which chatbots can provide an accessible experience is by being available on a channel that is most accessible to the user;  whether that be social messaging platforms like Facebook Messenger or Telegram, voice channels such as Amazon Alexa or Google Assistant, or enterprise messaging channels such as Teams or Slack.

For this article however, we’ll be focusing on probably the most common chatbot messaging channel, the chatbot widget, typically accessible from an organisation’s website or App. We’ve focussed on this channel, because it’s also the channel where the organisation has likely the most control over the full experience of the conversational platform, not just the responses that the chatbot provides to users, but also the user interface design of the chatbot widget itself .

Because all users deserve the best possible web accessibility when using your online services, we take the accessibility of our chatbot widgets seriously. Through EBM’s Chat Widget Builder feature we’ve ensured that chatbot managers have complete control over the user interface of their chatbot widgets and we’re proud to say that EBM’s chat widgets are designed to meet the latest WCAG 2.1 & WCAG 2.2 (Working Draft) requirements.

The WCAG (Web Content Accessibility Guidelines) are continually evolving to meet the needs of more users and to keep up with advancements in technology. As much as is possible, we ensure that EBM and our chat widgets are kept up to date with the latest accessibility guidance. New improvements and features are released to the EBM regularly (typically every 3 weeks) and of course this includes enhancements to the accessibility features of our chat widgets.

In this blog, we’ll start by sharing some of the accessibility features EBM provides to users and your chatbot managers. These features are outlined with specific references to the relevant requirements in the published ​​WCAG 2.2 documentation. We’ll then share some of the ways we’ve tested and evaluated EBM’s chat widget with our customers and their user base.

EBM’s chatbot widget: accessibility features

In this section, we’ll provide an overview of some accessibility features provided by EBM’s chat widget for your users and how you can use them to best serve your audience. We have also included references to the appropriate sections in the Web Content Accessibility Guidelines (WCAG) 2.2.

EBM includes the Chat Widget Builder feature, which enables teams to create and customise ready-to-use chatbot widgets and deploy them to your websites and apps. The Chat Widget Builder includes a wide range of easy to apply features, settings and parameters that help you to ensure that you’re providing your users with the best and most accessible chat experience. You can also add custom CSS and Javascript to create an even more tailored and bespoke experience.

The EBM Chatbot Widget Builder

Here is a high-level overview of some of the key accessibility features provided by EBM’s chat widget and chat widget builder:

Colours and contrast (https://www.w3.org/TR/WCAG22/#contrast-enhanced)

With the Chat Widget Builder, you can ensure that every element of the widget provides the appropriate colour contrast choices, whilst matching your brand identity. This can include the background colour for your call to action button or widget header, or the text colour for the welcome message or quick reply buttons.

Text sizing and spacing (https://www.w3.org/TR/WCAG22/#resize-text, https://www.w3.org/TR/WCAG22/#text-spacing)

The Chat Widget Builder enables you to define the size of each text element and the spacing between text. Users will be able to resize the chat widget text via their browser or operating system.

Readable and understandable (https://www.w3.org/TR/WCAG22/#readable)

Via EBM, every text element within the chat widget is customisable to your requirements and so that you can ensure that you’re providing an experience that is readable and understandable to your audience. Of course this includes all the responses your chatbot provides users, but also includes elements like a welcome popup message and a message confirming that the user wishes to close the chat widget.

Responsive and adaptable (https://www.w3.org/TR/WCAG22/#adaptable )

The chat widgets are designed and built in a responsive and mobile-friendly way, ensuring they look and work great on any device and in any orientation that your users might prefer. What is more, the widget includes controls that enable the user to expand or contract the height and width of the widget panel, ensuring that they can view the information in a format that your audience prefers.

Hyperlinks

Through EBM’s Chat Widget Builder and content authoring tool you have complete freedom around how you want to define the content, styling and targets for any hyperlinks you want to provide through your widget, whether that be a link to a useful resource provided as a chatbot response, or a link to your privacy documents in the welcome page. You can ensure that links are easily understandable and navigable for all users.

Enough time (https://www.w3.org/TR/WCAG22/#enough-time)

It is important that you provide your users with enough time to process information and respond to the chatbot comfortably. Through EBM you can define adjustable wait times during inactive periods, after which you can prompt the user with a tailored message.

Seizures and Physical Reactions (https://www.w3.org/TR/WCAG22/#seizures-and-physical-reactions)

The chatbot widgets are designed and implemented to ensure that there is no flashing content or unnecessary animations that might cause seizures or physical reactions.

Keyboard accessible (https://www.w3.org/TR/WCAG22/#keyboard-accessible)

The EBM chatbot widgets are accessible and navigable using keyboard shortcuts.

Screen readers 

The EBM chatbot widgets are designed to work as intuitively as possible with screen readers. The Chatbot Widget Builder also includes settings that will be useful for users using screen readers, such as whether or not you want a notification to appear after the user has sent a message.

Imagery

Through EBM you can bring conversions to life with the addition of images and scrollable cards that include images. You can also include images as part of the design of your chatbot widget, for instance, including an avatar icon. So that users with screen readers can always identify images, you can add configurable alt tags to all images.

EBM’s chatbot widget: accessibility user testing and evaluation

We use the WAVE tool suite (https://wave.webaim.org/) and other tools to evaluate the web accessibility of the EBM chat widget. WAVE is recognised on W3C Web Accessibility Initiative ‘Web Accessibility Evaluation Tools List’:

https://www.w3.org/WAI/ER/tools/?q=wcag-21-w3c-web-content-accessibility-guidelines-21

WAVE is suitable for testing against WCAG 2.1. The EBM engineering team also keep abreast of the updates in WCAG 2.22 and WCAG 3. WCAG 2.22 is currently in draft and scheduled for full publication in September 2022. WCAG 3 is also currently in ‘Working Draft’.

WAVE and other web accessibility evaluation tools can be used to identify many accessibility errors automatically. However, it is also necessary to evaluate accessibility and identify some accessibility issues manually. In the following sections, we’ll outline some of the testing activities we’ve conducted with EBM’s customers and their users.

NSPCC

Project summary

The NSPCC works with tens of thousands of children every year, covering a wide range of physical and mental health issues.  During the pandemic, Childline counsellors have delivered over 170,000 counselling sessions to children and young people. Mental and emotional health make up over a third of all the counselling sessions delivered.

In the past, this scale has presented a challenge in regard to ensuring that every young person gets the support they need. Through Childline, young people up to the age of 18 can access counselling sessions via web chat to get advice around issues ranging from school exams to self-harm and suicide. As these are extremely sensitive issues, conversations can’t be rushed.

With this issue in mind, NSPCC uses EBM to manage and maintain a digital assistant to assist Childline counsellors and keep young people on the web chat platform engaged with relevant and informative content during waiting periods.

Accessibility testing

During our work with NSPCC, we worked closely with their web development team to ensure that our chat widget met their core accessibility requirements, noting that the users could be any age from 12-18 years old in the first instance. 

As well as going through this process we also conducted several rounds of user testing with young people and young deaf people. We facilitated four focus groups in total, inviting the young people to trial the chatbot and give us their thoughts and feedback, both from a content and usability point of view. This proved to be a very useful step in the process, ensuring that the bot was pitched at the correct level and could respond in simple language that young people understood.

Full case study: NSPCC

Versus Arthritis

Project summary

Versus Arthritis is the UK’s largest charity dedicated to supporting people with arthritis. Launched in 2018 following the merger of the two leading arthritis charities in the UK – Arthritis Research UK and Arthritis Care – Versus Arthritis works with healthcare professionals and leading international researchers to help develop treatments and reduce the devastating impact that arthritis can have on people’s lives.

Musculoskeletal (MSK) conditions such as arthritis and back pain affect an estimated 18.8 million people across the UK. For people living with the daily impact of arthritis, as well as other MSK conditions, having easy access to accurate and up-to-date information and resources about their condition is crucial.

Aligned with the charity’s mission and objectives, Versus Arthritis launched AVA in 2016 to help tackle this challenge. AVA is a virtual assistant that provides a 24/7 resource for people with arthritis and other MSK conditions seeking personalised and easily accessible self-care information.

In 2019, Filament were selected by Versus Arthritis as a strategic partner to help define and deliver a strategy for expanding AVA’s conversational AI capabilities. Through using the EBM product, we partnered with Versus Arthritis to help improve the level of support the charity was able to provide to its beneficiaries by improving conversational analysis and resolution, enhancing analytics and retraining tools, and extending access via partner websites and new channels.

Full case study: Versus Arthritis

Accessibility testing

Versus Arthritis conducted an accessibility audit across the entirety of the charity website (https://www.versusarthritis.org/). As part of this site wide audit, Versus Arthritis also reviewed the accessibility of their chatbot widget delivered by EBM.

Based upon the feedback from the audit and user testing conducted with blind, deaf and partially sighted users, improvements were made directly to our chat widget. Improvements included controlling alt texts for imagery, ensuring messages could be tabbed in the correct order for the screen reader, as well as reviewing brand colours to set the right contrast for the widget.

Kids Help Phone

Project summary

Founded in 1989, Kids Help Phone is Canada’s only 24/7, national support service. It offers free professional phone counselling and text-based mental health support in both English and French, providing millions of young people with a safe and trusted space during any moment of crisis or need.

It also offers a wide range of articles, tools and resources on its website to help young people through the challenges or experiences they might face. The issues these resources cover range from anxiety and stress, to relationships, bullying, depression and suicide.

With more and more young people looking for advice and support around such sensitive issues, Kids Help Phone wanted to make it easier for users to find the right content on its website. The navigation had to be as intuitive and user-friendly as possible, ensuring that young people in need can quickly get access to the most relevant content and resources. 

With this goal in mind, we worked with Kids Help Phone to integrate conversational AI into its existing suite of services and in turn improve website navigation and the user experience. This centred around a bespoke digital assistant – named ‘Kip’ – to assist young people in finding the right resources when they need them most.

Full case study: Kids Help Phone

Accessibility testing

As part of the project KHP worked with us to perform a thorough evaluation of the accessibility and browser compatibility of the Kip chatbot and chatbot widget. This was conducted inline with the Accessibility for Ontarians with Disabilities Act (https://www.aoda.ca/).

A number of improvements were identified and improvements were made to the chatbot widgets based on these recommendations. Those recommendations included:

  • Making sure all the components in the chatbot can be read by all major screen readers, including on mobile.
  • Enabling users to expand the chatbot widget to full screen.
  • Ensure that each conversational element includes a unique label of where the message originated and the time, to allow users with screen readers to understand the sequence of the messages.
  • Enable use of the keyboard ESC button, that should allow the user to close or minimise the chat window.
  • Add the option of a transparent overlay on the website, once the chatbot widget is open.

More to explore

Ready to kickstart your chatbot journey?