Accessibility problem - single checkbox has multiple label tags?

[Anonymous]

Hi,

I've noticed that on forms that contain a checkbox I always end up with two label tags - this is using Forms 2.0 embedding on non-marketo pages. This is a problem for me only in that I'm currently making accessibility fixes to a site - and the scanner reports keep complaining that the label is empty - even though the label I've input to marketo isn't - and only the second label in the html output is blank.

I'm not certain if it's a real problem for screen reader software etc...  vs being just technically wrong according to accessibility standards. However it does seem odd to have two labels for one checkbox - when it's not in a checkbox group where you'd expect that.

I've highlighted this below

<div style="margin-bottom: 10px;" class="mktoFieldDescriptor mktoFormCol">

  <div style="width: 10px;" class="mktoOffset"></div>

  <div class="mktoFieldWrap mktoRequiredField">

<label style="width: 180px;" class="mktoLabel mktoHasWidth" for="Opt_In_Consent__c">

    <div class="mktoAsterix">*</div>

    Opt in label text...

    </label>

    <div style="width: 10px;" class="mktoGutter mktoHasWidth"></div>

    <div style="width: 50px;" class="mktoLogicalField mktoCheckboxList mktoHasWidth mktoRequired">

     <input class="mktoField" value="yes" id="Opt_In_Consent__c" name="Opt_In_Consent__c" type="checkbox">

    <label for="Opt_In_Consent__c"></label>

    </div>

    <div class="mktoClear"></div>

  </div>

  <div class="mktoClear"></div>

</div>

I've noticed that in some of the form styles the second label is used to display a custom checkmark/checkbox graphic using css - instead of the normal browser defined checkbox. Perhaps this is just a result of that design choice...

[SanfordWhiteman]

It's not incredibly odd to have multiple labels. Because of the convenient event relationship between labels and form controls, you can avoid having redundant controls that way and also allow for visual customizations (like fancy checkboxes as you mentioned) that are at least pretty good semantically (better than generic containers).

The problem with accessibility + labels, as I understand it, is that all the text of all the labels is supposed to be concatenated.  So even if they had identical text the screen reader would read "something something".

At any rate, you can just clip the extra label out of the DOM if you're worried about it.

[angusmc_atla]

Hey! We're having a similar issue with ensuring accessibility compliance and the duplicate label tags inside of the check box. Noticed this sol'n was posted in 2016 - was wondering if this is still an applicable solution today?