Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making chatbots accessible

386 views

Published on

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.

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Making chatbots accessible

  1. 1. Making chatbots accessible Ross Mullen @MrRossMullen www.canaxess.com.au hello@canaxess.com.au
  2. 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. 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. 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. 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. 6. 1. Customisable platform Many vendors are now offering chatbot platforms to build upon, but be wary of pre-built chatbot controls
  7. 7. "Fully accessible" Test any pre-built web control thoroughly, it may not provide good accessibility support
  8. 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. 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. 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. 11. How it looks so far <div tabindex="0" aria-label="The bot said">What can I help you with?</div>
  12. 12. 4. Announce the updates Use the aria-live attribute on the parent element containing all messages
  13. 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. 14. Prioritise announcements A value of assertive announces updates immediately through the screen reader, polite pauses until all other audio has ended
  15. 15. 5. Rich media messages Several bot frameworks allow rich media to be returned including images, audio and buttons in addition to plaintext
  16. 16. Rich media messages Also need to be made accessible Images have appropriate ALT text Buttons are keyboard accessible Appropriate focus order
  17. 17. 5 principles + more Accessibility support doesn’t end at these 5 principles
  18. 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. 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. 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. 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. 22. For more information • Get a free information card from www.canaxess.com.au/infocard/chatbots

×