search

microsoft / pxt-arcade

Arcade game editor based on Microsoft MakeCode
https://arcade.makecode.com
MIT License
481 stars 209 forks source link

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

Closed Chandangithb closed 1 year ago

Chandangithb commented 2 years ago

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:

Test Environment:

MAS1 1 1-Automated Check results(feedback) MAS1 1 1-Alternate text is not defined for the image present inside the Usabilla Feedback button

https://user-images.githubusercontent.com/112375678/187208062-9591e3fb-0c1a-4b62-950e-a7641572ef7d.mp4

Chandangithb commented 2 years ago

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

abchatra commented 2 years ago

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

srietkerk commented 2 years ago

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 commented 1 year ago

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

abchatra commented 1 year ago

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