microsoft
[Programmatic Access - Make code - About monster]: Links present on the 'About monster racer' page do not have discernible text.
User Experience:
Visually impaired people who depend on screen readers for navigation will get impacted if the screen reader does not announce the accessible name for the links. Due to which the end user will not be able to able to use the blocks.
Note: User credentials should NOT be included in the bug.
Repro Steps:
- Launch application URL: https://arcade.makecode.com/skillmap/educator-info/racer-map-info/.
- About monster racer page opens. Turn on the AI (Accessibility Insights).
- Verify whether discernible text is defined for the links present on the page or not.
Actual Result:
Issue: Links present on the 'About monster racer' page do not have discernible text.
Observation: When focus lands on the links, the screen reader announces as "Link".
Expected Result:
Accessible name should be defined for all the links which are present on the 'About monster racer' page.
Example: Aria-label="Place on random tile" should be defined.
Issue:
Ensures links have discernible text (link-name - https://accessibilityinsights.io/info-examples/web/link-name)
Target application:
About Monster Racer - https://arcade.makecode.com/skillmap/educator-info/racer-map-info
Element path:
table:nth-child(17) > tbody > tr:nth-child(2) > td:nth-child(2) > .link.ui:nth-child(5)
Snippet:
<a class="ui link" href="/reference/tiles/place-on-random-tile">
How to fix:
Fix all of the following:
- Element is in tab order and does not have accessible text
Fix any of the following:
- Element does not have text that is visible to screen readers
- 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
MAS Reference:
ARIA Authoring Ref Link/Fluent Patterns Guidance /HITS Guidance:
UIA/DOM details available:
Yes (Refer the attachment)
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 an 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: Windows 11 23H2 (OS Build:22631.3007)
- Browser: Chrome Version 121.0.2277.4 (Official build) dev (64-bit).
- Test Matrix: Chrome + JAWS
- Tool: Accessibility Insights
- URL: https://makecode.microbit.org/.
#Accessibility;#A11yMAS;#A11ySev2;#MAS4.1.2;#A11yAuto:#K4W;#HCL;#Benchmark;#Win11-Chrome;#E2E-HCL-MakeCode-Feb2024;#WCP