Forum Discussion

SamHill's avatar
SamHill
Super Hero
2 years ago

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

Rise 360
  • AngeloCruz's avatar
    AngeloCruz
    9 months ago

    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!

  • AngeloCruz's avatar
    AngeloCruz
    Staff
    9 months ago

    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!

  • Crystal-Horn's avatar
    Crystal-Horn
    Staff
    2 years ago

    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!

  • SamHill's avatar
    SamHill
    Super Hero
    2 years ago

    Thanks for looking over this Crystal. I look forward to seeing this release in future.

  • MarvieYap-Mulde's avatar
    MarvieYap-Mulde
    Former Staff
    2 years ago

    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

Related Content