Label wrapping input

Pattern Checker

What does this mean?

An input has been found to have a label wrapped around it.

For example:


<label>
    <input type="radio" id="phone" name="contact">
    Phone
</label>

Impact on users

Whilst this is valid markup (the wrapping of the input means the for attribute on the label is not needed), it can cause issues for users.

This used to cause issues for IE6, IE7 and Safari and currently is known to cause issues for Dragon Naturally Speaking (speech recognition software) where the accessible name is lost. It is unclear if the issue is the wrapping or the lack of explicit connection via the for attribute (I'll update this when I have the opportunity to test), but in the meantime it is best to avoid this markup as the potential impact is high.

How to fix

Instead of wrapping the input with the label, separate the two and connect them using the for attribute.

For example:


<input type="radio" id="phone" name="contact">
<label for="phone">Phone</label>

References

Classification

Level: warn
Tagged: best-practice

See all issues