[Programmatic Access – Make code – CS Intro 3]: Aria label is not defined for "List box" present on " CS Intro 3" page.

[testingmakecode]

User Experience:

Visually impaired users who depend on screen readers will get disoriented and will face difficulty in understanding the purpose of control if aria-label or name is not defined for the control. Note: • User credentials should NOT be included in the bug.

Pre-Requisites:

• Turn on Narrator.

Repro steps:

1. Open URL: https://arcade.makecode.com/courses/csintro3
2. “" CS Intro 3” page will open.
3. Navigate to List “Intro” Card.
4. Run AI for Web tool.
5. Verify the issue.

Actual Result:

Issue: Aria label is not defined for "List box" present on " CS Intro 3" page. Observation: When the screen reader (Narrator) focuses on "intro" card present on " CS Intro 3" page., Screen reader (Narrator Scan mode) announces as “Intro selected selection contains 6 items” and in (Narrator browse mode) it announces as “Intro 1 of 6 selected”.

Expected Result:

Solution: Aria label should be defined for "List box" as "CS intro 3" list box present " CS Intro 3" page. So that screen reader announces, " CS intro 3 list intro 1of 6 selected'.

Note: The same issue exists with other 43 urls: https://webcompliance.trafficmanager.net/ScanResultsApi/GetAccessibilityScanConsolidatedReport?siteId=813950a8-f21b-e811-80c5-0004ffc0fd57

Issue:

Ensures every ARIA input field has an accessible name (aria-input-field-name - https://accessibilityinsights.io/info-examples/web/aria-input-field-name)

Target application:

CS Intro 3 - https://arcade.makecode.com/courses/csintro3

Element path:

.text > .cards.ui[role="listbox"]

Snippet: `

``

```

How to fix:

Fix all of the following: • 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.

Environment: Microsoft Edge version 104.0.1278.2 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 http://aka.ms/AccessibilityInsights.

WCAG Reference:

MAS 4.1.2 – Name, Role, Value

Test Environment:

• OS Version: 22H2 (OS Build:25151.1010) • Browser: Microsoft Edge Version 104.0.1278.2 (Official build) (64-bit) • Tool used: Accessibility insights for Web, Developer Tool (F12) • #URL: https://arcade.makecode.com/courses/csintro3

MAS4.1.2)_No aria-label is defined for the listbox control.webm

[testingmakecode]

#A11yMAS,#HCL,#Accessibility,#A11ySev2,#HCL-MakeCodeArcade-Sep21,#WCAG4.1.2