search

surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.2k stars 812 forks source link

[Accessibility] Checkboxes: Provided roles are invalid #8460

Closed ParthaA11y closed 4 months ago

ParthaA11y commented 4 months ago

Original Issue: Accessibility issue - SurveyJS Player.

Title: When Aria attributes are not used correctly assistive technology may not correctly function as expected.

URL: https://surveyjs.io/form-library/examples/nps-question/reactjs

Issue:

Role=listbox is used in the

and role=option is used for the input field with type=checkbox. As a result Assistive technology such as screen reader does not recognize the correct role and the state of the checkbox and does not read them as checkbox. Also, JAWS is providing instruction to use arrow key to navigate but using arrow key is not working in this case. A listbox and option are used in the dropdown or combo boxes. Listbox example

Expectation: On focus screen reader should read the accessible name, valid role and current state of the element. For the checkbox screen reader should read the role as checkbox and current state as checked or not checked, so that a user can understand the functionality and keyboard interaction of the checkbox.

Code snippet:

How to fix: Please remove the role=listbox from the fieldset and role=option from the inputs.

Tools used: Screen reader JAWS, NVDA. Success criteria: WCAG 4.1.2: Name role and value https://www.w3.org/WAI/WCAG21/Techniques/general/G108 https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA4

Screenshot: image

Screen recordings:

  1. JAWS without role=listbox and option: https://www.loom.com/share/9d1fa1574de044e19d26cc31cfd2e275?sid=e1f70162-5fdf-410d-b772-0b9dd7050cb3

  2. NVDA Without role=listbox and option: https://www.loom.com/share/f1548edd0574487eb712574e91fb6f86?sid=c8354f10-9227-4713-b1a5-6e9ae6258362

  3. NVDA with listbox and option: https://www.loom.com/share/bc99a8e085bf4a10ab7949b693bd6455?sid=af1910f8-203b-4ffc-b1f9-51acf82df6c5

  4. JAWS with listbox and option: https://www.loom.com/share/43fff5b629134010a45a21189c58e8c8?sid=8c555f4e-53bc-4f48-92b9-c639519517f5

dmitry-kurmanov commented 4 months ago

related to https://github.com/surveyjs/survey-library/pull/5269/files checkbox group example https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox/ checkbox group with isRequired https://react-spectrum.adobe.com/react-aria/CheckboxGroup.html