Accessible checkboxes for RAW HTML form embed

HubSpot Ideas

Status: Idea Submitted

1

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

2

The addition of role=“checkbox” on the <ul> (unordered list) and the addition of role=“checkbox” to each of the <li> 's (list items) that live within that unordered list is simply wrong. This tells assistive tech. that those elements themselves are taking on the role of being checkboxes. Without other checkbox properties to accompany role=“checkbox” on a non input element just confuses the assistive tech.
Can this be an update we see to the form code around checkboxes?