[$40][MSFT-122] Sample challenge page: Improper heading level structure

[veshu]

Steps to Reproduce

1. Go to the sample challenge page: https://clicktime.symantec.com/34CaebazimgmFxdkBZnihRc7Vc?u=https%3A%2F%2Fwww.topcoder.com%2Fchallenges%2F?tab=details. 2. Ensure that the screen reader is switched on. 3. Press the letter 'h' to navigate through the list of headings on the page. 4. Notice the level of each heading. 6. The heading levels do not follow a logical sequence.

Expected Result
Use h1-h6 tags in a logical sequence. Headings should not skip levels.

Actual Result
Improper heading level structure. The first heading 'the name of the challenge' on the page is a level 1 heading followed by 'prizes' at level 3. 'eligible events', 'review style', 'challenge links', 'challenge terms', 'share' also need to be designated with the correct heading levels.

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

WCAG Category: 1. Perceivable
WCAG Level: A
WCAG Success Criterion: 1.3.1 Info and Relationships
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%2020

[ThomasKranitsas]

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

This is an automated message for thomaskranitsas via Topcoder X

[ThomasKranitsas]

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

This is an automated message for thomaskranitsas via Topcoder X

[asadath1395]

@veshu I don't understand what is the problem in this, if we try to change something, it will break the design. What is the purpose of doing it in proper structure?

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[veshu]

@asadath1395 I will get back to you on this later. please continue with other issues for now. Thanks!

[veshu]

@drasticdpk Can you please share input here #2820 (comment)

[drasticdpk]

Hi @veshu / @asadath1395 , currently the header is not on structure way in give page. Here is the reference to update header in correct way.
https://monosnap.com/file/if2uhgKAjb4bPCTZy9GW3rE0YRlaQv
https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility
Please let me know for anything.

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[romitgit]

PR for this issue is ready : #3056

[drasticdpk]

Operating System: Windows
Browser: Chrome
URL : https://test-community-app.topcoder-dev.com/challenges/30055274

[drasticdpk]

@veshu , Since some header are not showing in Test env due to configuration/Setup dependency. It would be great if we could setup all scenario in test environment , so it has less chance to miss all scenario by developer.
For example ELIGIBLE EVENTS:

[romitgit]

Should I commit a fix for this @drasticdpk ?

[lakshmiathreya]

@nkumar-topcoder @sushilshinde - this is one of the Env dependent issues as raised in the call yesterday. Unable to test it completely in Dev. Heading structure as visible in Dev was tested and passed by @drasticdpk. Hence failed in Prod. @drasticdpk - could you add image of this page on Dev to clarify?

[sushilshinde]

@drasticdpk there was a patch provided

#3161

Please test after 15 mins on test env

[ajefts]

Verified in prod.

[crazyk07]

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

This is an automated message for crazyk via Topcoder X