Challenges page: Screen readers do not recognise the type of element and the selected state for the 'design', 'development' and 'data science' toggle controls.

Steps to Reproduce

1. Go to the Challenges page: https://www.topcoder.com/challenges. Ensure the screen reader is switched on. 3. Press the down arrow from the 'search challenges' text box a couple of times. 4. You will hear 'design', 'development', 'data science'. 5. Notice screen readers do not announce whether these are toggle buttons or checkboxes. Also screen readers do not announce whether these are selected or not.

Expected Result Screen readers should announce these as toggle buttons or checkboxes and also indicate to the user which of these are selected.

Actual Result The 'design', 'development', data science' toggle controls are announced just like any other text on the page. Their role and state are not announced.

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

WCAG Category: 4. Robust WCAG Level: A WCAG Success Criterion: 4.1.2 Name, Role, Value 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%204

Final Submission Guidelines

Upload the updated code to TopCoder