HubSpot Ideas

JGonzalez93

Accesible checkboxes for RAW HTML form embed

It is nearly impossible to use embedded forms with tools like VoiceOver, as selecting a checkbox reads all items in the list, not the checkbox you are on. I've found a way to fix this myself with JS, but a user not able to do this just has to deal with a broken form.
Here are details:
The form adds unnecessary role="checkbox" attributes to ‹li› elements within the inputs-list.multi-container class, which is causing accessibility errors.
Specifically, the VoiceOver+Safari combination cannot successfully select the checkboxes on the form.
Here's an example of the problematic code:
<ul role="checkbox" class="inputs-list multi-container">
Accessibility tools also flag this error: "Ensure elements with ARIA roles have all required ARIA attributes."

1 Reply
mattdotcc
Member

Juan was kind enough to share this for me. Commenting for visibility.