# Accesible checkboxes for RAW HTML form embed

**URL:** <https://community.hubspot.com/t/accesible-checkboxes-for-raw-html-form-embed/123719>\
**Category:** HubSpot Ideas\
**Tags:** forms\
**Created:** [January 10, 2025, 10:50pm UTC](https://community.hubspot.com/t/accesible-checkboxes-for-raw-html-form-embed/123719 "2025-01-10T22:50:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![JGonzalez93](https://avatars.discourse-cdn.com/v4/letter/j/ea5d25/32.png) [@JGonzalez93](https://community.hubspot.com/u/JGonzalez93)\
**Post date:** [January 10, 2025, 10:50pm UTC](https://community.hubspot.com/t/accesible-checkboxes-for-raw-html-form-embed/123719/1 "2025-01-10T22:50:15Z")

</div>

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.”

---

<div class="post-metadata">

**Author:** ![mattdotcc](https://avatars.discourse-cdn.com/v4/letter/m/ea666f/32.png) [@mattdotcc](https://community.hubspot.com/u/mattdotcc)\
**Post date:** [January 10, 2025, 11:05pm UTC](https://community.hubspot.com/t/accesible-checkboxes-for-raw-html-form-embed/123719/2 "2025-01-10T23:05:22Z")

</div>

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