CANAXESS Web and Digital Accessibility
CANAXESS Web and Digital Accessibility

Accessible chatbot design

These principles when followed will make the web-based user interface of a bot accessible up to Web Content Accessibility 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.

Get the source code for "fenton" an accessible UI for Microsoft Azure based bots.

Principles of accessible bots

To make a bot accessible:

  1. 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.

  2. Conversation history can be navigated

    All conversation history must be findable when navigating from the keyboard.

    The entire conversation must be navigable via the keyboard with and without assistive technology running.

    Add the tabindex attribute to the conversation container to make it keyboard focusable and scrollable using the arrow keys.

    <section id="conversation-text-body" aria-live="polite" tabindex="0" aria-label="Chatbot conversation"></section>
  3. Provide conversation identification

    Screen reader users may not have access to visual clues and rely on text cues instead.

    Screen reader users may use the chatbot in a non-visual way and each conversation block must be identifiable, is each message spoken by the bot or the user.

    The aria-label attribute is used on each section element to provide a unique label of where the message originated, added to this is the time to allow a user to understand the sequence of the messages.

    <section aria-label="The bot said 2:41 PM">What can I help you with?</section>
    <section aria-label="You said 2:42 PM">I'd like more infromation on my home loan</section>
  4. Add support for dynamic content

    Content which updates regularly must have accessibility attributes added.

    Each conversation block must be enclosed within a single parent container, which has the aria-live attribute and the value polite. As each question and reply is appended to the container, the aria-live attribute announces the change to the assistive technology.

    This method of announcing onscreen changes means only the most recent message is announced, not the full conversation history.

    <section aria-live="polite">
    <section aria-label="You said 2:42 PM">What can I help you with?</section>
    </section>

    Note. Only announce the updated content when the user is idle. If updates are announced too frequently they can become a a distraction, hence use of the polite value. Polite causes the screen reader to pause announcing the text until other audible notifications have ended.

  5. 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.

  6. 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>

  7. 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

Free cards and stickers

Some things just look better in person. Signup for a free accessibility information card or pack of four stickers and we'll post them to you in the mail. We'll also add you to our newsletter, where we send you occasional emails about things we think you’ll find useful and interesting, like expert accessibility tips, inspirational customer stories and new service updates.

Privacy

The security and privacy of your data matters to us. Your details are encrypted when they are sent and your address is only ever used to send out the information cards and stickers you have requested. If you would like further details about our security policy please Contact us

Where would you like the card sent?
Which would you like?

Copyright © 2019 CANAXESS Pty Ltd ACN 614 088 416