Forum Discussion
Accessibility issue - checkbox list
The checkbox list items are not functioning correctly. In order to select a checkbox list item, the user must select the graphical checkbox icon.
The user should be able to select the checkbox text label and select/deselect the checkbox list item.
This appears to be because the element is not using the correct semantic HTML <label> and is using an aria-labelledby attribute instead.
Using the <label> element will allow users to select the text to select the checkbox.
Illustration of the behaviour: https://www.dropbox.com/s/wslzshgev2dwzo9/2023-07-11_13-12-43.mp4?dl=0
Expected behaviour: https://www.dropbox.com/s/5subeogzwijk49l/2023-07-11_13-18-39.mp4?dl=0
Hi everyone! In today's update for Rise 360, we added the ability to be able to click on the block list checkbox label and have that select the checkbox. In addition, you can now click and drag highlighting the checkbox label text without toggling the checkbox.
New features and fixes are immediately available, though you might need to export a Rise 360 course again to update the existing published output with the new feature.
Have a great day!
Hi everyone! In today's update for Rise 360, we added the ability to be able to click on the block list checkbox label and have that select the checkbox. In addition, you can now click and drag highlighting the checkbox label text without toggling the checkbox.
New features and fixes are immediately available, though you might need to export a Rise 360 course again to update the existing published output with the new feature.
Have a great day!
Thanks for the screen recording, Sam. While the checkbox list meets the criteria for the WCAG 2.1 criterion of “On Input,” I see how having a larger area to select may make it easier for users.
We’re going to write a feature request to make the checkbox list more semantic, and we’ll update you here if that change is released!
Thanks for looking over this Crystal. I look forward to seeing this release in future.
Hey Sam!
Just checking in to let you know we are currently exploring ways to improve the checkbox list, and make it act more semantic. The nature of our checkbox limits us from using <label> tag because an author can add hyperlinks in the checkbox text. We opted to separate them because it's discouraged to place interactive elements inside the <label> tag for accessibility concerns.
Cheers!
Marvie
