[Screen Reader - Bot Framework Web Chat- Help]: Headings are not defined programmatically on cards showing for Help keyword

[v-duku]

User Experience:

If headings are not defined programmatically on cards showing for Help keyword, then screen reader user will be disoriented and will not be able to navigate in heading mode. The user will also be facing issues while accessing and navigating on the page.

Note: Login Credentials must not be provided within the bug.

Test Environment:

OS Version: 21H1
OS Build: 19043.1110
Browser: Microsoft Edge Version 94.0.972.2 (Official build) dev (64-bit)
Screen Reader: Narrator

Repro steps:

1. Open URL Provided by product owner.
2. Web chat bundle will open.
3. Navigate on the web chat bot and select microphone icon.
4. Speak "help" keyword in Type your message box, then select send button.
5. Cards related to the keyword will appear, navigate on the cards.
6. Verify the issue.

Actual Result

Headings are not defined programmatically on cards showing for Help keyword. 'Accessibility' heading is not defined in heading tags.

Expected Result

Headings should be defined programmatically on cards showing for Help keyword. 'Accessibility' heading should be defined in heading tags.

Note: This issue exists with similar controls throughout the application.

MAS Reference

WCAG 2.4.6 – Headings and Labels

Reference Links

Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.

[v-duku]

#A11yMAS;#A11ySev2;#HCL;#WCAG2.4.6;#Accessibility;#Win10-Edge(Chromium);#BotFrameworkWebChat-Aug21;

[compulim]

@v-duku could you try this out when using Adaptive Cards independently? You can use the Adaptive Card designer in preview mode to check its accessibility.

FYI, our help command is actually sending multiple Adaptive Cards.

[compulim]

@v-duku are you saying the "XML message" text in the screenshot below should be defined as <h1> (or <h2>...)?

In Adaptive Cards, there is no way for us to define whether a TextBlock is a header or not. You can see the schema here, https://adaptivecards.io/explorer/TextBlock.html.

Seems this is a bug/ask on Adaptive Cards side to add indication of header in TextBlock.

[compulim]

Adaptive Cards schema 1.5 will support style: 'heading' in TextBlock element, which will resolve this issue.

microsoft/AdaptiveCards#5698

[compulim]

Status: Waiting for external

Talked to AC team. They are expecting to ship AC library 2.10.0 with support of AC schema 1.5 in a couple of weeks ahead.

They have 2.10.0.beta-2 up and asked us to try it out and see if the behavior is desirable or not. Will have an update soon.

[compulim]

We are updating to AC library 2.10.0. PR #4074 is on its way.

[compulim]

Status: Fixed

We bumped to Adaptive Cards 2.10 and it now support role="heading" for card headers.

[kattepalli]

Verified issue at https://corinagum.github.io/WebChat-release-testing/02.babel-standalone/index.html URL and now heading level 2 is defined for all the cards. Hence the issue is fixed, closed the bug

.