Accessible chatbot design
These principles when followed will make the web-based user interface of a bot accessible up to Web Content Accessible Guidelines 2.0 (WCAG2) AA.
They include optional collapsed background information explaining why the information is relevant, and can be read online, downloaded and printed.
These principles came from research which we discussed in our blog post How to make chatbots accessible
Principles of accessible bots
To make a bot accessible:
Choose a customisable platform
Creating an accessible interface means getting as close as possible to building in HTML and CSS.
Products which don’t allow much control of the HTML will affect the overall accessibility of the bot. It can also be difficult to make an accurate decision when buying a bot and understanding accessibility support, and especially important don’t accept the vendors words alone without independent testing.
When trialling bots request a test account to be created which will allow you to conduct proper evaluation with a range of accessibility testing tools. Use CANAXESS as your external web accessibility provider to independently test any content being displayed.
Conversation history can be navigated
All conversation history must be findable when navigating from the keyboard.
Some users may be unable to see the conversation history, and instead use a screen reader to tab to and announce onscreen content. Use the tabindex attribute to provide a way for the conversation history to be navigated and be reached from the keyboard.
The tabindex attribute with a value of zero means each question and answer reply will receive keyboard focus in the correctly displayed order, and is reached as part of the normal keyboard tab sequence.<div tabindex="0" aria-label="The bot said">What can I help you with?</div>
Provide conversation identification
Screen reader users may not have access to visual clues and rely on text cues instead.
The aria-label attribute can be used on each conversation block to provide a way for the user to know who has said part of the conversation, was it the bot or themselves.
The aria-label attribute will trigger text content to be announced audibly by screen readers without affecting any of the screen presentation. The text will only be announced when a user has tabbed to each conversation block, and this technique is best combined with the 'Conversation history can be navigated' technique.<div tabindex="0" aria-label="The bot said">What can I help you with?</div> <div tabindex="0" aria-label="You said">I'd like more information on my home loan</div>
Add support for dynamic content
Content which updates regularly must have accessibility attributes added.
Each conversation block should be enclosed within one parent container, and have the aria-live attribute with the value polite. When each question and reply is appended to the container, the aria-live attribute will announce the change to the assistive technology.
This method of announcing onscreen changes means only the most recent change is being announced, not the full conversation history.<div class="conversationbody" aria-live="polite">
<div tabindex="0" aria-label="You said">What can I help you with?</div>
Only announce the updated content when the user is idle, you don’t want the updating display notification to become a distraction, hence we use the polite value. Polite causes the screen reader to pause announcing the text until other audible notifications have ended before announcing new content.
Understand the range of bot responses
Some bot frameworks can send a variety of message formats and these must also be accessible.
The Microsoft Bot framework allows rich media cards to be sent as replies. These cards mix text, buttons and images. The principles of accessible design should be followed and applied to these elements to ensure accessibility is maintained over every response from the bot.
Refer to our Accessible Forms information card for making HTML form elements accessible.
Provide a skip link
Provide a way to bypass all page links easily and navigate direct to the chatbot.
Bots are generally located in the lower right of the screen and this can be difficult for keyboard users. When the bot is further down in the page markup, there may be several links to tab through before focus reaches the chatbot. If the page has many links this repeated tabbing can become frustrating.
A skip link is an in-page anchor which is displayed as the first page link, when the link is activated it takes user focus to the chatbot bypassing other page links. The href value of the link uses the ID of the HTML element containing the bot.<a href="#chatbot">Skip to Chatbot</a>
Consider other factors
Follow accessibility principles for other aspects of bot design to ensure what is being created has the best accessibility support.
- Choose a relative font size which allows the text size to shrink and grow
- Use an accessible colour contrast
- Ensure the bot is displayed using responsive techniques
- Use language that is appropriate for your audience
This work is licensed under a Creative Commons Attribution-NonCommerical-ShareAlike 3.0 Unported License.
Designed by CANAXESS www.canaxess.com.au