search

microsoft / 30daysof

30 Day of Learning Resources, Samples and Curricula
https://aka.ms/30DaysOf
MIT License
170 stars 56 forks source link

A11y_30days_Welcome to 30 Days of Learning_Screenreader: Both Narrator/NVDA are announcing the Link names twice once with Image link and once with Text link. #181

Closed Ashutoshsahoo164 closed 1 year ago

Ashutoshsahoo164 commented 1 year ago

"Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier."

GitHub Tags:

A11yTCS;#A11yMAS;#A11ySev2;#30days;#P3_30days_Dec22;#WCAG1.1.1;#DesktopWeb;#Win11;#ChromiumEdge;#Narrator;#NVDA

Environment Details:

Application Name: 30days

URL: https://microsoft.github.io/30daysof/

Windows Version: Win11 Chromium Edge Version: 110.0.1556.0 (Official build) dev (64-bit) ScreenReaders: Narrator , NVDA(Version 2022.3.3)

Repro Steps:

  1. Hit the URL: https://microsoft.github.io/30daysof/
  2. Turn on Narrator screen reader.
  3. Tab till the links present in the mail section of the page. For example , "Start" , "Explore" etc links.
  4. Observe that Narrator is announcing the same link name twice , once with Image link and once with Text link.

Actual:

Narrator Focus goes to Image link and also to text link , the same link name is announced twice. For Example while navigating with Narrator , focus goes to Image link and also to text link , there Narrator announces the link name twice. This is creating one confusion.

NOTE : This Issue is also Reproducing with NVDA screen reader.

Expected:

Image and associated link can be coded in the single anchor instead of separate anchor. Additionally, alt should be empty as link text is present for the links. The screen readers should announce the link name only once when the focus will reach to the image link and Text link in a combinedly.

User Impact:

Screen reader user will be confused when they will navigate to all the links. For example the "Start" link , the focus goes to Image link as well as Text link.

Attachment:

Narrator Attachment: Narrator link gif

NVDA Attachment: NVDA Link

Ashutoshsahoo164 commented 1 year ago

Hi @nitya Please do not close the bugs directly. The bugs needs to be verified by Us and then closed.

After the fix you have made here , Narrator is reading the Link name twice because , the images present are decorative and Alt value is provide, along with that Heading level assigned. As the link name is present twice here in Alt value as well as the Heading , so the bug is not fixed. Please fix the issue and let me know for verification.

Same issue is observed in NVDA

nitya commented 1 year ago

Will do - let me reopen this one and tag you to re-verify once I look at it again

nitya commented 1 year ago

@Ashutoshsahoo164 we have decided to unpublish the site and deactivate it from internal listings. Can you verify and close this issue now that website is no longer active?

Ashutoshsahoo164 commented 1 year ago

As per the above comments , closing this bug.