[$10][MSFT-118] Challenges page: The topcoder logo doesn't have an alt text. #2817

veshu · 2019-07-17T07:06:19Z

Steps to Reproduce

Go to the Challenges page: https://www.topcoder.com/challenges. 2. Ensure screen reader is switched on. 3. Press the shortcut 'ctrl + home' to make sure that you are at the top of the page. 4. Press the down arrow. 5. Notice screen reader reads 'link graphic www.topcoder'

Expected Result
Screen reader should announce the logo as 'link graphic topcoder logo'

Actual Result
Screen reader announces the topcoder logo incorrectly.

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

WCAG Category: 1. Perceivable
WCAG Level: A
WCAG Success Criterion: 1.1.1 Non-Text Content
Screen Reader Used: JAWS
Accessibility Audit Tool used: N/A

Attachment
https://topcodermsft-my.sharepoint.com/personal/pd-topcoder_topcodermsft_onmicrosoft_com/Documents/Forms/All.aspx?cid=088f5f5d%2D9b1c%2D4b7e%2Dacbf%2D320c257c9a9a&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%2FKameshwarid%2Fbug%2029

ThomasKranitsas · 2019-07-18T10:08:03Z

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

This is an automated message for thomaskranitsas via Topcoder X

ThomasKranitsas · 2019-07-18T10:08:09Z

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

This is an automated message for thomaskranitsas via Topcoder X

cwdcwd · 2019-07-18T22:46:32Z

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

This is an automated message for lazybaer via Topcoder X

codeMinter · 2019-07-22T23:09:49Z

@veshu @Oanh-and-only-Oanh #2740 already takes care of the requirement in this ticket. Do we still need this?

codeMinter · 2019-07-23T06:08:46Z

@veshu can you please suggest if we would need this, to me it makes no sense, since #2740 aria-label is read as it is a-href ?

@lakshmiathreya thoughts ☝️ ?

veshu · 2019-07-23T06:12:26Z

@codeMinter Lets not merge this and close. You can close the merge request.

lakshmiathreya · 2019-07-23T06:39:08Z

Agreed - this is a duplicate of #2740.

codeMinter · 2019-07-23T06:50:24Z

Thanks @veshu @lakshmiathreya - closed the related PR.

cwdcwd · 2019-07-25T00:52:55Z

[500]: Challenge for the updated issue 2817 is creating, rescheduling this event

This is an automated message for lazybaer via Topcoder X

cwdcwd · 2019-07-25T00:54:31Z

[500]: Challenge for the updated issue 2817 is creating, rescheduling this event

This is an automated message for lazybaer via Topcoder X

cwdcwd · 2019-07-25T02:50:38Z

[500]: Challenge for the updated issue 2817 is creating, rescheduling this event

This is an automated message for lazybaer via Topcoder X

cwdcwd · 2019-07-25T02:50:38Z

[500]: Challenge for the updated issue 2817 is creating, rescheduling this event

This is an automated message for lazybaer via Topcoder X

cwdcwd · 2019-07-25T02:50:41Z

[504]: Failed to create challenge.

This is an automated message for lazybaer via Topcoder X

cwdcwd · 2019-07-25T02:50:42Z

[504]: Failed to create challenge.

This is an automated message for lazybaer via Topcoder X

cwdcwd · 2019-07-25T02:56:56Z

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

This is an automated message for lazybaer via Topcoder X

gets0ul · 2019-08-01T21:41:17Z

@nithyaasworld @Oanh-and-only-Oanh
Keyboard navigation is already being read out as "Topcoder Homepage".

community-app/src/shared/components/TopcoderHeader/index.jsx

Line 354 in 4f402f6

so I guess I'll wait if mouse hover is wanted too.

nithyaasworld · 2019-08-01T21:45:08Z

@gets0ul

Failed in PROD because when on the Challenge Listings page, reader does not announce the "Topcoder Logo". It should announce as "Topcoder Logo link to Topcoder Homepage".

I think @Oanh-and-only-Oanh wants the reader to include "Topcoder Logo" in the current announcement. Currently it only says "Link to Topcoder homepage". The expectation here is "Topcoder Logo Link to Topcoder Homepage"

Edit: To me, it currently says "Link Topcoder homepage". I tested in NVDA on windows.

Oanh-and-only-Oanh · 2019-08-01T22:51:39Z

@Nithya is correct. The tabbing and hoverover should both read “topcoder logo link to homepage”

…

Sent from my iPhone

On Aug 1, 2019, at 2:45 PM, Nithya ***@***.***> wrote: @gets0ul Failed in PROD because when on the Challenge Listings page, reader does not announce the "Topcoder Logo". It should announce as "Topcoder Logo link to Topcoder Homepage". I think @Oanh-and-only-Oanh wants the reader to include "Topcoder Logo" in the current announcement. Currently it only says "Link to Topcoder homepage". The expectation here is "Topcoder Logo Link to Topcoder Homepage" — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

crazyk07 · 2019-08-01T23:25:21Z

@gets0ul we will increase payment for this ticket. Since half of this has already been paid out, we will create another ticket to pay you another $10 upon completion.

gets0ul · 2019-08-02T04:00:42Z

@nithyaasworld @Oanh-and-only-Oanh new PR is submitted.

tosha5252 · 2019-08-06T01:21:47Z

announces 'topcoder homepage link', but doesn't state it's the logo

lakshmiathreya · 2019-08-06T04:06:50Z

@tosha5252 this is not as per requirement clearly stated by @Oanh-and-only-Oanh above. Pls mark as QA fail.

gets0ul · 2019-08-06T04:30:44Z

@tosha5252 @lakshmiathreya
Tested on Windows 10, Chrome, NVDA and JAWS using fix from #3191
NVDA: https://drive.google.com/file/d/1fz7c_l-wwN06-4LS7qcA-kCZ8IXmtb4I/view
JAWS: https://drive.google.com/file/d/1k48wS7p5qxb94j_KsAzAMThuPLVrUOwn/view

tosha5252 · 2019-08-06T04:38:33Z

@gets0ul it says the wrong thing...should be saying “topcoder logo link to homepage”

gets0ul · 2019-08-06T04:57:40Z

@tosha5252
So please do share what's your setting when testing it?
JAWS or NVDA, by keyboard or mouse over, using fix from my PR or not?

I shared two videos above, have you watch it? Please share yours too so we can check why the result is different.
Thanks.

gets0ul · 2019-08-06T05:00:53Z

@tosha5252 @lakshmiathreya
After re-read your comment did you mean that it should be "topcoder logo link to homepage", instead of "topcoder logo link to topcoder homepage"

So @Oanh-and-only-Oanh which one should we use here?

veshu · 2019-08-06T05:03:34Z

@tosha5252 @lakshmiathreya

Please clear your cache and try again. Note it is only deployed on test site.

tosha5252 · 2019-08-06T06:44:22Z

Verified working on test site

tosha5252 · 2019-08-08T05:26:20Z

Verified

Windows 10 env
Browser: Chrome

Oanh-and-only-Oanh added the Accessibility label Jul 17, 2019

crazyk07 added the Challenge Listing label Jul 17, 2019

veshu changed the title ~~[MSFT-118] Challenges page: The topcoder logo doesn't have an alt text.~~ [$10][MSFT-118] Challenges page: The topcoder logo doesn't have an alt text. Jul 18, 2019

Oanh-and-only-Oanh added the tcx_OpenForPickup label Jul 18, 2019

gets0ul self-assigned this Jul 18, 2019

cwdcwd added tcx_Assigned and removed tcx_OpenForPickup labels Jul 18, 2019

gets0ul mentioned this issue Jul 18, 2019

Fix for Issue #2817 - Topcoder logo alt text #2954

Closed

gets0ul added the tcx_ReadyForReview label Jul 18, 2019

Oanh-and-only-Oanh removed the tcx_Assigned label Jul 18, 2019

jmgasper added tcx_OpenForPickup and removed tcx_OpenForPickup labels Jul 24, 2019

jmgasper added tcx_OpenForPickup and removed tcx_OpenForPickup labels Jul 25, 2019

nithyaasworld added the Accessibility label Aug 1, 2019

gets0ul mentioned this issue Aug 2, 2019

Fix the reading of Topcoder Logo #3191

Merged

veshu added tcx_ReadyForReview and removed tcx_Feedback labels Aug 2, 2019

sushilshinde added Ready for QA and removed tcx_ReadyForReview labels Aug 5, 2019

tosha5252 added QA Fail QA verification on Dev has failed. Assignee to redo the fix. and removed Ready for QA labels Aug 6, 2019

tosha5252 added QA Pass and removed QA Fail QA verification on Dev has failed. Assignee to redo the fix. labels Aug 6, 2019

sushilshinde added Ready for Prod QA and removed QA Pass labels Aug 8, 2019

tosha5252 added QA Pass in PROD Passed verification on Production tcx_FixAccepted and removed Ready for Prod QA labels Aug 8, 2019

tosha5252 closed this as completed Aug 8, 2019

[$10][MSFT-118] Challenges page: The topcoder logo doesn't have an alt text. #2817

[$10][MSFT-118] Challenges page: The topcoder logo doesn't have an alt text. #2817

Comments

veshu commented Jul 17, 2019

ThomasKranitsas commented Jul 18, 2019

Uh oh!

ThomasKranitsas commented Jul 18, 2019

Uh oh!

cwdcwd commented Jul 18, 2019

Uh oh!

codeMinter commented Jul 22, 2019

Uh oh!

codeMinter commented Jul 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

veshu commented Jul 23, 2019

Uh oh!

lakshmiathreya commented Jul 23, 2019

Uh oh!

codeMinter commented Jul 23, 2019

Uh oh!

cwdcwd commented Jul 25, 2019

Uh oh!

cwdcwd commented Jul 25, 2019

Uh oh!

cwdcwd commented Jul 25, 2019

Uh oh!

cwdcwd commented Jul 25, 2019

Uh oh!

cwdcwd commented Jul 25, 2019

Uh oh!

cwdcwd commented Jul 25, 2019

Uh oh!

cwdcwd commented Jul 25, 2019

Uh oh!

gets0ul commented Aug 1, 2019

Uh oh!

nithyaasworld commented Aug 1, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Oanh-and-only-Oanh commented Aug 1, 2019 via email

Uh oh!

crazyk07 commented Aug 1, 2019

Uh oh!

gets0ul commented Aug 2, 2019

Uh oh!

tosha5252 commented Aug 6, 2019

Uh oh!

lakshmiathreya commented Aug 6, 2019

Uh oh!

gets0ul commented Aug 6, 2019

Uh oh!

tosha5252 commented Aug 6, 2019

Uh oh!

gets0ul commented Aug 6, 2019

Uh oh!

gets0ul commented Aug 6, 2019

Uh oh!

veshu commented Aug 6, 2019

Uh oh!

tosha5252 commented Aug 6, 2019

Uh oh!

tosha5252 commented Aug 8, 2019

Uh oh!

codeMinter commented Jul 23, 2019 •

edited

Loading

nithyaasworld commented Aug 1, 2019 •

edited

Loading