Dear WebChat​ developers,

We've been using WebChat in a chatbot for the Microsoft AI for Accessibility-funded ADMINS project, here at The Open University.

For our text and speech-enabled Web-based Chatbot we are particularly concerned about accessibility, so accessibility experts (Chetz Colwell, and Steven Price) have done evaluations and testing for us.

I will be creating bug reports for individual accessibility issues, and linking to this ticket for clarity.

I'm happy to discuss the issues, possible solutions, and would like to get involved in pull requests where appropriate.

I should also acknowledge that they found plenty that was positive about the accessibility of our Chat-bot, and by extension the WebChat library!

I hope this helps,

Nick

---

[added]

Motivation / context

A note on my motivation for raising the issues ...

I've mostly implemented workarounds and fixes as we went along for the accessibility issues that Chetz, Steven and I identified.

The purpose(s) of raising the bugs are so:

1. We can reduce the number of workarounds (hacks?) built into our implementation;

2. The "WebChat" library has a greater level of accessibility "built-in", by default, without other developers having to code workarounds (many may not be aware of the issues, or the knowledge to fix them);

---

• Accessibility spreadsheet/report.

Screenshots

[n/a]

Version

• WebChat.js version :~ 4.10.1;
  • JS :~ https://cdn.botframework.com/botframework-webchat/4.10.1/webchat.js;
• (Speech SDK version :~ 1.13.1)
  • (JS :~
    https://cdn.jsdelivr.net/npm/microsoft-cognitiveservices-speech-sdk@1.13.1/distrib/browser/microsoft.cognitiveservices.speech.sdk.bundle-min.js)

Describe the bug

Work-in-progress!

• — bug: Missing tabindex on video player start button [accessibility] #3656, Missing tabindex on video player start button;
• — CSS 'outline' is missing when WebChat buttons, text fields and links receive focus [keyboard accessibility] #3657, CSS outline is missing when WebChat buttons, text fields and links receive focus;
• — PR Add suggested actions flow layout #3641, Add suggested actions flow layout by @compulim — good job!
• — bug: The WebChat container's role should not always be 'complementary' [screen reader accessibility] #3658, PR Allow implementors to change the WAI-ARIA role of the container (#3658) #3669, WebChat container's role should not always be complementary;
• — bug: Provide more context when links open in a new window/tab [screen reader accessibility] #3659, Accessibility: The highlighted links below does not indicate whether they are internal or external links and whether they open in new window or not #3087, Provide more context when links open in a new window/tab;
• — #?

[Bug]