Why is Marketo creating a duplicate form Label?

Highlighted

Why is Marketo creating a duplicate form Label?

In trying to stay ADA compliant but the form generator creates a blank duplicate label for checkboxes. Is this a bug? Is there a fix? See screenshot.

Thanks in advance

duplicateLabel.gif

2 REPLIES 2
Highlighted
Level 10 - Community Moderator

Re: Why is Marketo creating a duplicate form Label?

It's because of the possible different order of Checkbox and Checkboxes fields relative to their labels.

You can delete the empty labels using JS if you want, this should do it:

MktoForms2.whenRendered(function(form){

  var formEl = form.getFormElem()[0],

        emptyLabels = formEl.querySelectorAll("label:empty"),

        arrayify = getSelection.call.bind([].slice);

  arrayify(emptyLabels).forEach(function(labelEl){

    labelEl.parentNode.removeChild(labelEl);

  });

});

Highlighted
Level 1

Re: Why is Marketo creating a duplicate form Label?

I am see four <labels> for each checkbox, all with the same id. This is invalid HTML as well as not being ADA-compliant. 

I believe that Marketo should not rely on site implementors to correct these problems.

 

<label for="OptInProduction" id="LblOptInProduction" class="mktoLabel mktoHasWidth" style="width: 300px;"></label>
<div class="mktoAsterix">
<label for="OptInProduction" id="LblOptInProduction" class="mktoLabel mktoHasWidth" style="width: 300px;">*</label>
</div>
<label for="OptInProduction" id="LblOptInProduction" class="mktoLabel mktoHasWidth" style="width: 300px;">Tick to Opt-in and receive information from Xerox</label>
<div class="mktoGutter mktoHasWidth" style="width: 10px;"></div>
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;">
<input name="OptInProduction" id="OptInProduction" type="checkbox" value="yes" aria-labelledby="LblOptInProduction" class="mktoField" />
<label for="OptInProduction" id="LblOptInProduction"></label>
</div>