Programmatic Access - Bot Framework Web Chat- Card Sportsclub]: 'Alt ' text or role='none/presentation' is not defined for the for the image under 'Card Sportsclub'

[manojs5]

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

User Experience:

When elements lack alt text, it can significantly hinder the accessibility of the content for these users. Screen readers rely on alt text to convey the meaning and context of images to users who cannot view them visually. Without alt text, screen reader users may miss important information or context provided by the images.

Note:

User credentials should NOT be included in the bug.

What browsers and screen readers do this issue affect?

Windows: Edge with Windows Narrator

Are there any code-based customization done to Web Chat?

No, I am using Web Chat without any customizations except "styleOptions".

What version of Web Chat are you using?

Latest production

Which area does this issue affect?

ARIA roles

What is the public URL for the website?

https://compulim.github.io/webchat-loader/

How to reproduce the issue?

1. Open URL: https://compulim.github.io/webchat-loader/ and sign in using valid credentials.
2. Navigate to web chat page and select 4.18.1-main.20240927.ea7a875 (30/9/2024) version and then select mockBot link under present label and then select open web chat in new window link at bottom.
3. Navigate to white label experience chat page and type Card Sportsclub word in type your message text box.
4. Navigate to the search results. Run AI.
5. Verify the issue

What do you expect?

There should be alternate text or a role of none or presentation for the images.

Ex:

Ensures elements have alternate text or a role of none or presentation

What actually happened?

'Alt ' text or role='none/presentation' is not defined for the for the image under 'Card Sportsclub' .

Observation:

Screen reader (Narrator, nvda, jaws) announces as 'Unlabeled graphic to get missing image descriptions, open the context menu'.

Do you have any screenshots or recordings to repro the issue?

Did you find any DOM elements that might have caused the issue?

No response

MAS reference

MAS 1.1.1 – Non-text Content

WCAG reference

1.1.1 Non-text Content

WAI-ARIA reference

No response

Adaptive Card JSON

No response

Additional context

Issue:

Ensures elements have alternate text or a role of none or presentation (image-alt - )

Target application:

Web Chat -

Element path:

.ac-container[dir="ltr"]:nth-child(1) > div > .ac-image

Snippet:

<imgclass="acimage"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFk%0D%0Ab2JlIElsbHVzdHJhdG9yIDIzLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246%0D%0AIDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5z%0D%0APSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMu%0D%0Ab3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAyNS42IiBz%0D%0AdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNiAyNS42OyIgeG1sOnNwYWNlPSJwcmVz%0D%0AZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5%0D%0AbGU+Cjx0aXRsZT5wbGF0Zm9ybXNBc3NldCAzNXF1ZXNpdG9uczwvdGl0bGU+CjxwYXRoIGNsYXNz%0D%0APSJzdDAiIGQ9Ik04LDBjMC43LDAsMS40LDAuMSwyLjEsMC4zYzAuNywwLjIsMS4zLDAuNSwxLjks%0D%0AMC44YzAuNiwwLjMsMS4xLDAuOCwxLjYsMS4zYzAuNSwwLjUsMC45LDEuMSwxLjIsMS43CgljMC4z%0D%0ALDAuNiwwLjYsMS4yLDAuOCwxLjlDMTUuOSw2LjYsMTYsNy4zLDE2LDhjMCwwLjYtMC4xLDEuMS0w%0D%0ALjIsMS42Yy0wLjEsMC41LTAuMywxLjEtMC42LDEuNkw4LDI1LjZMMC44LDExLjIKCWMtMC4zLTAu%0D%0ANS0wLjUtMS0wLjYtMS41QzAuMSw5LjEsMCw4LjYsMCw4YzAtMC43LDAuMS0xLjQsMC4zLTIuMUMw%0D%0ALjUsNS4yLDAuNyw0LjYsMS4xLDRDMS44LDIuOCwyLjgsMS44LDQsMS4xCgljMC42LTAuMywxLjIt%0D%0AMC42LDEuOS0wLjhDNi42LDAuMSw3LjMsMCw4LDB6IE0xMy45LDEwLjZMMTMuOSwxMC42TDEzLjks%0D%0AMTAuNmMwLjItMC40LDAuNC0wLjgsMC41LTEuMmMwLjEtMC40LDAuMi0wLjksMC4yLTEuMwoJYzAt%0D%0AMC45LTAuMi0xLjgtMC41LTIuNmMtMC4zLTAuOC0wLjgtMS41LTEuNC0yLjFjLTAuNi0wLjYtMS4z%0D%0ALTEuMS0yLjEtMS40QzkuOCwxLjYsOC45LDEuNCw4LDEuNGMtMC45LDAtMS44LDAuMi0yLjYsMC41%0D%0ACglDMy45LDIuNiwyLjYsMy45LDEuOSw1LjRDMS42LDYuMiwxLjQsNy4xLDEuNCw4YzAsMC40LDAu%0D%0AMSwwLjksMC4yLDEuM2MwLjEsMC40LDAuMiwwLjgsMC40LDEuMmwwLDBsMCwwbDYsMTEuOUwxMy45%0D%0ALDEwLjZ6IE04LDMuMwoJYzAuNiwwLDEuMywwLjEsMS44LDAuNGMxLjEsMC41LDIsMS40LDIuNSwy%0D%0ALjVjMC41LDEuMiwwLjUsMi41LDAsMy43Yy0wLjUsMS4xLTEuNCwyLTIuNSwyLjVjLTEuMiwwLjUt%0D%0AMi41LDAuNS0zLjcsMAoJYy0xLjEtMC41LTItMS40LTIuNS0yLjVjLTAuNS0xLjItMC41LTIuNSww%0D%0ALTMuN0M0LjEsNSw1LDQuMSw2LjIsMy43QzYuNywzLjQsNy40LDMuMyw4LDMuM3ogTTgsMTEuM2Mw%0D%0ALjQsMCwwLjktMC4xLDEuMy0wLjMKCWMwLjgtMC4zLDEuNC0xLDEuNy0xLjdjMC4zLTAuOCwwLjMt%0D%0AMS43LDAtMi42QzEwLjcsNS45LDEwLDUuMyw5LjMsNUM4LjUsNC43LDcuNSw0LjcsNi43LDVDNS45%0D%0ALDUuMyw1LjMsNS45LDUsNi43CglDNC43LDcuNSw0LjcsOC41LDUsOS4zQzUuMywxMCw1LjksMTAu%0D%0ANyw2LjcsMTFDNy4xLDExLjIsNy42LDExLjMsOCwxMS4zTDgsMTEuM3oiLz4KPC9zdmc+Cg==" style="min-width: 0px; width: 35px; height: 35px;">

How to fix:

Fix any of the following:

• Element does not have an alt attribute
• aria-label attribute does not exist or is empty
• aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
• Element has no title attribute
• Element's default semantics were not overridden with role="none" or role="presentation"

[manojs5]

#A11YAuto;#A11yMAS;#A11ySev2;#Accessibility;;#Benchmark;#BotFrameworkWebChat-Oct24;#HCL;#K4W;#MAS1.1.1;#Win11-Edge(Chromium);

[Kirank915]

@OEvgeny could you please confirm if we need to route this bug as external to adaptive cards or will your team only fix this issue?