Accessible conversational UI's CSUN ‘22
- 2. Intuit Confidential and Proprietary 2 Speakers Sagar Barbhaya Accessibility Engineering Leader Poonam Tathavadkar Turbotax Accessibility
- 3. Intuit Confidential and Proprietary 3
- 4. Something you have to realize about accessibility is that it is not a project. It's not something you can do once and be done! It is a lifestyle change, it's culture and it's a practice. It's something that must happen from the beginning to the end throughout the whole process! - Lucy Greco, Intuit TurboTax User
- 5. Intuit Confidential and Proprietary 5 What is a CUI ? What is Accessibility and Accessible CUI ? Research Findings Things to Keep in Mind - For Designers and Developers Guidelines Around Accessible CUI’s Analysis of some virtual assistants Agenda
- 6. ● Human talks to Bot/Computer Programme ● Main types of CUI ○ Chatbots ○ Voice assistant ○ Virtual Assistants ○ Interactive voice response What is a CUI?
- 7. Intuit Confidential and Proprietary 7
- 8. Key Features of CUI ● Potential for multiple communication modalities ● Potential for use through multiple channels ● Dialogue based interactions ● Combining logic and machine learning
- 9. Intuit Confidential and Proprietary 9 Accessible CUI A conversational interface (CUI) is a user interface for computers that emulates a conversation with a real human. An Accessible conversational interface (CUI) is the one that can be used by ALL. (without being required to speak, see or type). Accessibility refers to the design of products, devices, services, or environments so as to be usable by people with disabilities. What Is ?
- 10. Research Findings ● Interacted with ~30 CUI’s from around the globe using a screen reader ● Ranged from critical businesses including Internet services to banks to cellular networks ● 90% did not have an accessible interface ● Imagine how annoying and inconvenient it is being deprived of this help during this pandemic, just because of your disability ● Stemmed from incorrect understanding of coding techniques
- 12. Things to keep in mind for Designers ● Discoverability of the ChatBot ● Placement of the “Chat” button. ● Crisp but meaningful content ● Avoid usage of Acronyms ● Appropriate Voice and tone ● Provide more context ● Avoid long list of choices
- 13. Discoverability of the chatbot
- 14. Placement of the chat Button Do not locate the contact/chat button too close to the edge of the window
- 15. Screen Reader Navigation Some ways to make sure Screen Reader user know about this chat button ● Add skip links ● Use Heading ● Use Aria <div role="region" aria-label="chat window"> <!-- chatbot code --> </div>
- 16. Keyboard Navigation In this example, keyboard users should be able to do the following. ● Minimize the chat window ● Close the chat window ● Go to “Type your message here” textbox ● Click send button with Keyboard ● Read chat history using keyboard
- 17. Focus Control As soon as the chat window opens, focus should go back to the first actionable element. Research also says that many people prefer focus to be shifted to textbox to ask the question
- 18. Labels ● Labels should start with a capital letter, be concise, and start with action first and context second. ● Include additional information when the visual design provides context. ● Avoid duplicate labels, such as “Copy message”. Which message is being copied? For example ○ ‘Minimize the webchat’ is better than ‘Hide’ ○ ‘Close the webchat’ is better than ‘Close’ ○ “Copy Nina’s message at 12:15” is better than “Copy”
- 19. Notify the user of latest messages Use aria-live attribute the read out the messages <div id="chat-content" tabindex="0" aria-live="polite">
- 20. Key Takeaways for Developers ● Focus control ● Focus indications ● Navigation ● Labels ● Reading the Alerts and Recent messages
- 21. Guidelines Around Accessible CUI’s ● Must be accessible to all customers ● Consider varied types of disabilities ● Now let us take a look at disability specific guidelines
- 22. Intuit Confidential and Proprietary 22 What To Keep In Mind? ➔ Allow volume control ➔ Provide alternatives to speech-only interactions (multimodal). ➔ Consider conventions of transmitting to hearing devices. Deaf or Hard of Hearing
- 23. Intuit Confidential and Proprietary 23 What To Keep In Mind? ➔ Create a time-efficient interaction. ➔ Keep messages short and allow interruptions. ➔ Let users control the speech rate. ➔ Make it discoverable. Blind and Low Vision
- 24. Intuit Confidential and Proprietary 24 What To Keep In Mind? ➔ Create a linear, time-efficient architecture. ➔ Provide context. ➔ Normalize language. ➔ Put important information first or last. Cognitive Disabilities
- 25. Intuit Confidential and Proprietary 25 What To Keep In Mind? ➔ Understand shaky and broken speech. ➔ Provide alternatives to speech-only interactions. ➔ Design appropriate pauses in listening. Physical Disabilities
- 26. Alexa Hearing - Alexa, speak slower - Call captioning, Closed captioning, Alexa captioning Speech - Tap to Alexa - Real time text - Adaptive listening Vision - Show and tell - Alexa, what am I holding? - Voiceview screen reader
- 27. Siri - Type, instead of speaking to Siri - Control voice feedback for Siri Choose Don’t Speak in Silent Mode, Only Speak with Hey Siri, or Always Speak Responses. - Turn on “Hey Siri” when iPhone is covered or facing down - Hide Apps when Siri is active