[Programmatic Access - Make code for micro bit - Feedback]: Alternate text is not defined for the image present inside the “Usabilla Feedback button”

[Chandangithb]

User Experience:

Visually impaired users who depend on screen reader and navigate in scan mode will not be able to understand the information provided or purpose of the image properly and might get confused.

Note: User credentials should NOT be included in the bug.

Repro Steps:

1. Launch URL: https://arcade.makecode.com/--skillmap#docs:/skillmap/racer
2. "Monster Racer" sign in page appears.
3. Navigate to the "Feedback" button and run an accessibility insights tool.
4. Observe and verify the issue.

Actual Result:

Issue: Alternate text is not defined for the image present inside the “Usabilla Feedback button” as a result when focus moves to the image in scan mode (Narrator) announces as “To get the missing image description open context menu unlabeled graphic”.

Expected Result:

Solution: Alternate text should be defined for the image present inside the “Usabilla Feedback button” as “Feedback logo”.

Issue:

Ensures elements have alternate text or a role of none or presentation (image-alt - (https://accessibilityinsights.io/info-examples/web/image-alt))

Target application:

MakeCode Skill Map - https://arcade.makecode.com/--skillmap#docs:/skillmap/racer

Element path:

#usabilla_live_button_container_iframe898772216;img

Snippet:

<img src="//d6tizftlrpuof.cloudfront.net/live/resources/buttons/usabilla_orange_rightSideFeedback.png" width="39" height="130">

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-labelled by 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".

Environment:

Microsoft Edge version 105.0.1300.0

This accessibility issue was found using Accessibility Insights for Web 2.32.0 (axe-core 4.4.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at .

MAS Reference:

• https://microsoft.sharepoint.com/:w:/r/sites/accessibility/_layouts/15/Doc.aspx?sourcedoc=%7b20E8F5D5-3053-4A0D-AD22-A35207B8F892%7d&file=MAS%201.1.1%20%E2%80%93%20Non-text%20Content.docx&action=default&mobileredirect=true

Reference Links:

• Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.
• External Bug Process: If this bug belongs to external team, mark it as resolved/done and assign it back to the tester with notes on where to file/route the bug. For more information, please use this External Bug Process (sharepoint.com). “HCL Staff should not log any third-party external bugs. Should be routed to EDAD team”.
• Please reach out to C&AI Teams channel for any process-related queries.

Test Environment:

• OS Version: 22H2 (OS Build:25163.1010)
• Browser: Microsoft Edge Version 105.0.1300.0 (Official build) (64-bit) 
• Tools: Accessibility Insights for Web, Developer tool(F12)
• URL: https://arcade.makecode.com/--skillmap#docs:/skillmap/racer

MAS1.1.1-Alternate.text.is.not.defined.for.the.image.present.inside.the.Usabilla.Feedback.button.mp4

[Chandangithb]

#A11yAuto;#K4W;#A11yMAS;#A11ySev3;#HCL;#Accessibility;#WCAG1.1.1;#HCL-MakeCodeArcade-Sep21;

[abchatra]

This is filed on incorrect repo. Moving to pxt-arcade repo.

[srietkerk]

Hi @Chandangithb! Thank you for your feedback and helping MakeCode improve. I have been working on improving the alt-text experience for this landing page, but unfortunately, the Usabilla Feedback button's image is something that we cannot touch. We have been in contact with the Usabilla team, and updating their image tag is not something they can do right now. Our current version of the site has an aria label on the container that the button is in. It sounds like the screen reader was able to read off this aria label and hopefully gives enough context for what the button is used for. I apologize for the inconvenience of not providing a better description of the image for the feedback button.

[Chandangithb]

@srietkerk Please remove external tag as it is coming in "Blank Dependency" category on our end.

[abchatra]

This is not our bug but external usabilla. Closing as external.