[$40][MSFT-78] The NVDA doesn't read some icons name when user try to mouse hover or click on them

[veshu]

Steps to Reproduce

1. Navigate to https://www.topcoder.com/members/doremihong
2. Try to mouse hover on "Skills" icons

Expected Result
The NVDA should read all icons name when user try to mouse hove on them.

Actual Result
The NVDA doesn't read some icons name when user try to mouse hover or click on them ( ex: HTML5, Illustrator, photoshop...)

Device: Desktop/Labtop
Operating System: Windows
Browser: Chrome

WCAG Category: 1. Perceivable
WCAG Level: A
WCAG Success Criterion: 1.2.3 Audio Description or Media Alternative (Prerecorded)
Screen Reader Used: Other
Accessibility Audit Tool used:

Attachment
https://topcodermsft-my.sharepoint.com/personal/pd-topcoder_topcodermsft_onmicrosoft_com/Documents/Forms/All.aspx?cid=b9c070b1%2Dbb96%2D40e1%2Db92f%2D16f47db5d911&FolderCTID=0x0120005C598A51049FC14CBA882E1AEE168F51&id=%2Fpersonal%2Fpd%2Dtopcoder%5Ftopcodermsft%5Fonmicrosoft%5Fcom%2FDocuments%2FMSFT%2DTeams%2DQA%2FJune%202019%2F29%20Jun%2FTest%20Results%2FBug%20Videos%20%26%20Log%20Files%2Fdoremihong%2FTest%20for%20Accessibility%20Challenge%2FBug%5F11

[cwdcwd]

Contest https://www.topcoder.com/challenges/30096276 has been created for this ticket.

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

Contest https://www.topcoder.com/challenges/30096276 has been updated - the new changes has been updated for this ticket.

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

Contest https://www.topcoder.com/challenges/30096276 has been updated - it has been assigned to rohitgupta_.

This is an automated message for lazybaer via Topcoder X

[lakshmiathreya]

@r0hit-gupta @codeMinter : the Member profile page in Topcoder-dev.com throws up 404 - pls let us know your testing process. Fyi - @drasticdpk.

[lakshmiathreya]

@nkumar @sushilshinde - fyi ...

[sushilshinde]

@lakshmiathreya @r0hit-gupta @codeMinter, please do not refer to www.topcoder-dev,

Use https://test-community-app.topcoder-dev.com/

https://test-community-app.topcoder-dev.com/members/TonyJ is working for me

[r0hit-gupta]

@lakshmiathreya I had tested it by injecting my changes into the link provided in the description above.

[codeMinter]

@r0hit-gupta @codeMinter : the Member profile page in Topcoder-dev.com throws up 404 - pls let us know your testing process. Fyi - @drasticdpk.

I used local setup when verified and worked fine, most of time I run local in PROD mode to make sure everything comes up fine.

[tosha5252]

Observed, still skipping icons

Env:
Windows 10
Browser: Chrome, up to date

[codeMinter]

Observed, still skipping icons

Env:
Windows 10
Browser: Chrome, up to date

@tosha5252 Can you add more details here ? You mean is it showing for some and not for some ?

[lakshmiathreya]

@tosha5252 could you upload a video to explain the issue?

[lakshmiathreya]

Clarification - in Dev we are unable to add Skills to Member profile. @nkumar-topcoder @sushilshinde @crazyk07 @Oanh-and-only-Oanh - pls take a call on this - we could merge the fix to Prod and test it there directly if you are confident about the code review. fyi - @tosha5252 @drasticdpk

[drasticdpk]

@codeMinter @Oanh-and-only-Oanh ,
Everything is fine except C#. It should say C Sharp not C number.
here is the reference link
https://monosnap.com/file/Mq83TfQKJcSKqOfQoXBFKFcqUydBDa

[r0hit-gupta]

@drasticdpk @codeMinter every screen reader has a different way of reading the symbol #. But I guess no reader is going to read that as sharp. I can add an if condition to take care of this but things can get messy if more skills with symbols are added down the line. Please let me know how to proceed. Thanks!

[crazyk07]

@drasticdpk Thanks for the specific attention to detail here, but I would say this solution will suffice for now. Closing ticket.

[crazyk07]

Payment task has been updated: https://software.topcoder.com/review/actions/ViewProjectDetails?pid=30097291

This is an automated message for crazyk via Topcoder X