CODEWITHSUNDEEP
htmlgoogle-chromeaccessibility
deltragon
deltragon

Reputation: 573

Chrome ignores label when it contains a strong element

I have a form that includes a label element with a strong element inside it.

<input id="priceCheck" type="checkbox">
<label for="priceCheck">
    <strong> Price Check </strong>
</label>

This is, as far as i understand, spec compliant, as label may contain phrasing content and strong is defined as such.

However, in Google Chrome (both Android and Desktop), the content of the label is ignored in the accessibility tree, making the form element unlabelled (and thus inaccessible for screenreaders). In Firefox it works as expected.

Is this intended/known behavior? Should i file a Chrome bug for this, or am I missing something?

(I fixed this by just styling the label with CSS, but I still wanted to know whether this was somehow forbidden by the spec.)

Upvotes: 0

Views: 1113

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24825

Original Answer - please see next level 2 heading for update.

The problem is not <strong> it is the way that chrome exposes labels to the accessibility tree on a checkbox.

You will notice that if you check the accessibility tree for the actual checkbox input, rather than the label, that it does link correctly.

This does not change if you move the styling to CSS, the label is still exposed as 'generic', but the input has 'label' (From label (for): label "Price Check") Price Check.

In fact it does not change if you remove the <strong> and add no CSS either.

It works fine in a screen reader as it is exposed on the input itself, this is the most important thing!

I think the confusion comes in the fact that a 'normal' text input the label does expose this information.

The below example shows this behaviour, I have added how each is exposed in comments.

.priceCheckBold{
   font-weight: bold;
}
<p>All checkbox labels are exposed as 'WebArea > Generic > Ignored'</p>
<label for="priceCheckBoldInline"><strong>Price Check</strong></label>  <!--WebArea > Generic > Ignored-->
<input id="priceCheckBoldInline" type="checkbox"/> 
<br/>
<label for="priceCheckBold" class="priceCheckBold">Price Check</label>  <!--WebArea > Generic > Ignored-->
<input id="priceCheckBold" type="checkbox"/> 
<br/>
<label for="priceCheck">Price Check</label>  <!--WebArea > Generic > Ignored-->
<input id="priceCheck" type="checkbox"/> 
<br/>
<hr/>
<p>All text input labels are exposed as 'WebArea > Generic > Label > Text "Price Check"'</p>
<label for="priceCheckTextBoldInline"><strong>Price Check</strong></label>  <!--WebArea > Generic > Label > Text "Price Check" -->
<input id="priceCheckTextBoldInline" type="text"/> 
<br/>
<label for="priceCheckTextBold" class="priceCheckBold">Price Check</label>  <!--WebArea > Generic > Label > Text "Price Check" -->
<input id="priceCheckTextBold" type="text"/> 
<br/>
<label for="priceCheckText">Price Check</label>  <!--WebArea > Generic > Label > Text "Price Check" -->
<input id="priceCheckText"/>

Update after testing.

It appears this is a bug with Chrome after discussions with OP and testing.

Do not use <strong>, <em> etc. within labels, instead style with CSS

One other solution is to fall back to <b> in stead of <strong>. This still works.

If anything this is a better element to use as it only changes the appearance and does not add any importance to the word.

Upvotes: 1

Related Questions