-
Bug
-
Resolution: Fixed
-
Low
-
8.4.0
-
Severity 3 - Minor
-
Issue Summary
The custom checkboxes defined inappropriately which are not operable through screen reader and keyboard.
Steps to Reproduce
- Navigate to the "Profile picture for admin" button present in the header.
- Activate it, it will expand with few options.
- Select "Profile" option among those option.
- On appearing "Profile" page, navigate to "Task" link and activate it.
- Activate the "Created by me" and "Incomplete" toggle buttons.
- Observe that table has been updated below.
- Within table custom checkboxes has been defined inappropriately.
- Verify that these checkboxes are inaccessible.
Screen Recording
Screen Recording 2023-11-24 at 4.07.24 PM.mov
Actual Results
The custom checkboxes "Edit this home page - Click Edit in the top right of this screen to customize your Space home page", "Create your first page - Click the Create button in the header to get started", and so on are not operable for screen reader users. The checkboxes are not focusable for screen reader and keyboard-only when users press Spacebar or Enter key.
Additionally, The checkboxes are defined using CSS which causes blocker for the users.
As a result, screen reader and keyboard-only users cannot access the functionality associated with the checkboxes.
Expected Results
- Use the native elements to modify the checkboxes such as <input> and <label> elements and also update the status of the checkbox on user interaction.
- Add "for" and "id" attributes with identical value to associate them programmatically.
Ensure that checkboxes must be operable for screen reader and keyboard-only users.
Additionally, the screen reader should identify the role and state of the checkboxes and radio buttons.
Code Snippet
<input type="checkbox" id="blog" name="write a blog post" checked> <label for="blog">Write a blog post - Click "Create" and select "Blog Post" to share newsLearn</label>
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.3.1
Chrome - Version 114.0.5735.198 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 16.4 (18615.1.26.11.23)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest