microsoft / BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.
https://www.botframework.com/
MIT License
1.59k stars 1.54k forks source link

[Screen Readers-Ask HR Virtual Assistant]: Screen readers(NVDA/JAWS) are narrating the source code in chat window when user invoked the Suggested Questionnaire button present in the “Ask HR Virtual Assistant” chat window. #4298

Closed kattepalli closed 2 years ago

kattepalli commented 2 years ago

PWD Impact: Screen reader users are getting impacted if screen readers(NVDA/JAWS) are narrating the source code in chat window when user invoked the Suggested Questionnaire button present in the “Ask HR Virtual Assistant” chat window.

Test Environment: OS: Windows 10 version 21H1 (OS Build 19043.1110) Browser: New Edge Version 92.0.902.62 (Official build) (64-bit)/Chrome Version 92.0.4515.107 (Official Build) (64-bit) URL: https://askhrvadev.azureedge.net/?botOrigin=ec Tools: NVDA

Repro Steps: Step 1: Enable Screen readers (NVDA/JAWS) and Open the above URL in the Chrome/Edge Browser using valid credentials. Step 2: 'AskHR Virtual Assistant' Home page gets opened. Step 3: Navigation: Select Benefits--> select Wellbeing Programme-->Wellbeing Programme gets displayed in chat window using down arrow key navigate to wellbeing Programme content and verify the Screen readers(NVDA/JAWS) behavior

Actual Result: Screen readers(NVDA/JAWS) are narrating the source code in chat window when user invoked the Suggested Questionnaire button present in the “Ask HR Virtual Assistant” chat window. Ex: NVDA/JAWS narrating as "You said: Wellbeing Programme send at September 28 at 7:20 PM……………………………………….

'',''Order".'',''ContentType}}} sent at send at September 28 at 7:20 PM Press ENTER to interact blank out of message blank activity Bot said: list with 1 items wellbeing programme"

Expected Result: Screen readers(NVDA/JAWS) shouldn't narrate the source code in chat window when user invoked the Suggested Questionnaire button present in the “Ask HR Virtual Assistant” chat window. Ex: NVDA/JAWS should narrate as "You said: Wellbeing Programme send at September 28 at 7:20 PM activity Bot said: list with 1 items wellbeing programme"

MAS Reference: MAS 1.3.1 – Info and Relationships

WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

kattepalli commented 2 years ago

A11yMAS;#A11ySev2;#HCL;#WCAG1.3.1;#Accessibility;#Win10-Edge(Chromium);#BotFrameworkWebChat-Aug21;#Linked:BUG58007427;#LinkedBug;

kattepalli commented 2 years ago

Bug copied from CSEO team Bug id:-https://microsoftit.visualstudio.com/OneITVSO/_workitems/edit/8007427

axelsrz commented 2 years ago

Hey @compulim could you take a look at this?

compulim commented 2 years ago

The text content of the activity is actually code. That's why the screen reader is narrating code.

image

Please refer to this article to see how to add "alt text" to a message, https://github.com/microsoft/BotFramework-WebChat/blob/main/docs/ACCESSIBILITY.md#controlling-the-narration-of-activities-and-attachments.

compulim commented 2 years ago

Talked with Sukesh offline. There are 2 approaches:

  1. Easier
    • Add alt text to channelData['webchat:fallback-text']
  2. More correct
    • Move the JSON from text field into channelData, the channel data is a property bag for storing anything serializable as JSON
    • Put human-readable text into the text field (say, alt text)
    • On custom render code, instead of parsing the JSON from the text field, use the JSON from the channelData field

For both approaches, the bot need to be updated to include more information (alt text).

cwhitten commented 2 years ago

Given offline discussions and approaches to address the issue. No action is needed on WebChat. This is a matter of adjusting the use of Web Chat and the configuration of the Bot. Closing