CODEWITHSUNDEEP
htmlaccessibilityformssemantic-markup
Ingvi Jónasson
Ingvi Jónasson

Reputation: 752

How to semantically markup extra information to a input and label field

I have a label extra description and an input field.

label and input with description

I am a bit unsure if the extra description belongs to the label field wrapped in a span like this:

<label for="phone">
    Telephone
    <span>For the delivery</span>
</label>
<input type="text" name="phone">

This way the description is clickable. But I am not sure if this is the correct approach with a11y in mind and semantic markup.

Does the extra informations belong to the label or should it be separated and how should it be formatted?

Upvotes: 0

Views: 743

Answers (1)

aardrian
aardrian

Reputation: 9009

First, I always map the <label> to the id of the field instead of its name (particularly important for radio buttons and checkboxes):

<label for="phone">
 Telephone
 <span>For the delivery</span>
</label>
<input type="text" name="phone" id="phone">

Your approach is not wrong. If you are concerned about verbosity for screen readers (maybe as the result of user testing) then you can shuffle that a bit and use aria-describedby:

<label for="phone">
 Telephone
</label>
<span id="phoneAddl">For the delivery</span>
<input type="text" name="phone" id="phone" aria-describedby="phoneAddl">

aria-describedby still associates it with the field, but announces it after the field and with a brief pause. It has not effect on anything other than a screen reader.

But to your point about the larger click area, and given that semantically it is fine to leave it in the <label>, I would just leave it there as in your example.

It also means you are not relying on ARIA to do the work of a native element (though it is not quite doing the same thing).

Upvotes: 6

Related Questions