fix images missing alternate text in RAI Vision dashboard for accessibility

[imatiach-msft]

Description

fix images missing alternate text in RAI Vision dashboard for accessibility

[Programmatic Access – Responsible AI Dashboard – Image Explorer View>Select Instance]: Image does not have alternate text or a role of none or presentation present under "Selected Instance" dialog.

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. Due to which it would be difficult to access controls present on the dialog efficiently.

Repro Steps:
Open RAI Dashboard
Navigate the "Vision Data Explorer" section, navigate the "Image Explorer View" tab and all the controls present under it.
Navigate to "Error Instances/Success instances" section.
Select an Error instance "Can".
"Selected Instance" dialog opens. Navigate all the controls present on the dialog.
Run the AI tool.
Observe and verify whether Image does have alternate text or a role of none or presentation or not.
Actual Result:

Image does not have alternate text or a role of none or presentation present under "Selected Instance" dialog.

Observation: Alt attribute is not defined for the image 26 present under "Error Instances" section.

Screen reader behavior:
NVDA and JAWS screen reader focus does not move to image in (Browse/VPC) mode.
When Narrator (Scan mode) focus moves to image, it announces as "Unlabeled graphic."
Expected Result:
Image should have alternate text or a role of none or presentation present for Error Instances " Image 26 Water bottle" under the "Selected Instance" dialog.

Note: The same issue exists throughout the application.
Issue:
Ensures elements have alternate text or a role of none or presentation (image-alt - https://accessibilityinsights.io/info-examples/web/image-alt)

Element path:
#flyoutImage_26
Snippet:

<img id="flyoutImage_26" src="data:image/jpg;base64,..." class="ms-Image-image is-loaded ms-Image-image--contain ms-Image-image--portrait is-fadeIn image-884">

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:
Chrome version 117.0.0.0

====

This accessibility issue was found using Accessibility Insights for Web 2.40.0 (axe-core 4.7.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Screenshot of fastpass with zero errors after fix:

Checklist

• I have added screenshots above for all UI changes.
• I have added e2e tests for all UI changes.
• Documentation was updated if it was needed.

[github-actions]

https://responsibleai.blob.core.windows.net/pullrequest/microsoft/responsible-ai-toolbox/ilmat/fix-image-alt-accessibility/dashboard/index.html

[github-actions]

https://responsibleai.blob.core.windows.net/pullrequest/microsoft/responsible-ai-toolbox/ilmat/fix-image-alt-accessibility/dashboard/index.html

[imatiach-msft]

close re-open for CI

[github-actions]

https://responsibleai.blob.core.windows.net/pullrequest/microsoft/responsible-ai-toolbox/ilmat/fix-image-alt-accessibility/dashboard/index.html