Removing duplicate checkbox label in Marketo Form

[dkonig]

I've added a checkbox to our form and it appears it is creating a second empty label. Any ideas how to remove that?

[SanfordWhiteman]

What's your specific reason for needing it to be removed from the DOM?

[dkonig]

Mainly for ADA Compliance. Screen readers can get confused seeing two labels and may grab the wrong one.

[SanfordWhiteman]

They’ll grab the first one in DOM order (which is the one with the ARIA accessible name).

[dkonig]

Thanks for responding. Regardless of the order in which the label is grabbed is it possible to remove that second label? I'm getting pushback from the team. They want to make sure they cover their bases for legal reasons and removing that second label would do that.

[SanfordWhiteman · Accepted solution]

MktoForms2.whenRendered(function(mktoForm){
   const arrayify = getSelection.call.bind([].slice);
   
   let formEl = mktoForm.getFormElem()[0],
       emptyLabels = formEl.querySelectorAll("label:empty");
   
   arrayify(emptyLabels)
   .forEach(function(label){
     label.parentElement.removeChild(label);
   })
});