Chatbots and conversation interfaces are a great way to engage with users and offer relevant information quicker then having them attempt to navigate through a website, but unless some principles for accessible design are adhered to, a well created and maintained accessible website can have all that hard work quickly undermined by an inaccessible chatbot.

1. Making chatbots accessible
Ross Mullen
@MrRossMullen
www.canaxess.com.au
hello@canaxess.com.au

2. What is a chatbot
It's a frontend UI which connects to a backend system where all the
smart conversation processing happens
• Structured conversation path
• AI to allow a more free conversation

3. Embracing chatbots
Chatbots have been embraced by many government departments
including the Museum of Australian Democracy, Australian Taxation
Office and also private organisations including Telstra and the
Commonwealth Bank

4. Caution before use
Unless principles for accessible design are followed. A well created and
maintained accessible website can be undermined by an inaccessible
chatbot

5. 5 accessibility principles
1. Choose a customisable platform
2. Ensure conversation history can be navigated
3. Make the conversation history identifiable
4. Ensure messages are announced
5. All rich media must be accessible

6. 1. Customisable platform
Many vendors are now offering chatbot platforms to build upon, but be
wary of pre-built chatbot controls

7. "Fully accessible"
Test any pre-built web control thoroughly, it may not provide good
accessibility support

8. A good platform
Will allow you to create your own custom frontend in HTML and CSS
and will put minimal interruption in the way. The closer you get to
creating an interface in HTML and CSS, the more accessible it is

9. 2. Conversation history
Each message in the conversation needs to be navigable from the
keyboard
tabindex=0 on every message makes the content reachable

10. 3. Identifiable conversation
Every message in the conversation needs to be identifiable. Mark
messages from the user and messages from the bot
aria-label="the bot said"
aria-label="you said"

11. How it looks so far
<div tabindex="0" aria-label="The bot said">What can I help you
with?</div>

12. 4. Announce the updates
Use the aria-live attribute on the parent element containing all
messages

13. Announcing new messages
When this container has text appended to it, only the new text is
announced by the screen reader
<div class="conversation-body" aria-live="assertive">
<div tabindex="0" aria-label="You said">What can I help you
with?</div>
</div>

14. Prioritise announcements
A value of assertive announces updates immediately through the
screen reader, polite pauses until all other audio has ended

15. 5. Rich media messages
Several bot frameworks allow rich media to be returned including
images, audio and buttons in addition to plaintext

16. Rich media messages
Also need to be made accessible
Images have appropriate ALT text
Buttons are keyboard accessible
Appropriate focus order

17. 5 principles + more
Accessibility support doesn’t end at these 5 principles

18. Also think about
Skip links to navigate directly to the chatbot
Conversation is pitched at a suitable age level
Colour contrast
Focus shows the most recent message

19. Test the results
These principles are based on assumptions, test these assumptions
with users to confirm results
Test in browsers
test different browser versions
test different assistive technology

20. Microsoft bot framework
Is one of the better configurable platforms if your skills are .NET
based. It supports many channels and plugin services, including
intelligence with Cognitive Services

21. Microsoft bot framework
However avoid using the embedded webchat control provided by
Microsoft, as the bots user interface will not be accessible
An accessible UI will be achieved by creating your own UI in HTML,
CSS and Javascript

22. For more information
• Get a free information card from
www.canaxess.com.au/infocard/chatbots