Accessibility problem - single checkbox has multiple label tags?
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...