HTML and CSS Reference
In-Depth Information
Discussion
The
label
element provides a caption for the associated form field. The
label
element
is best for simple forms, while ARIA is better suited to form fields that need multiple
labels or whenever the
label
element isn't an option.
Keep in mind that a main difference between
aria-labelledby
and
aria-describedby
is
that labels are intended to be
concise
while descriptions may be
wordier
and include
more detail.
See Also
7.6 Grouping Form Fields Logically
Problem
You need to group related fields within a form.
Solution
Add the
fieldset
element around each group of related form fields, and add a
legend
as the first element within the
fieldset
. The
legend
represents a caption or title for the
group of fields:
<form>
<fieldset>
<legend>Movie Rating</legend>
<p><input type="radio" name="rating" id="rating1">
<label for="rating1">Excellent</label></p>
<p><input type="radio" name="rating" id="rating2">
<label for="rating2">Good</label></p>
<p><input type="radio" name="rating" id="rating3">
<label for="rating3">Fair</label></p>
<p><input type="radio" name="rating" id="rating4">
<label for="rating4">Poor</label></p>
</fieldset>
</form>
Do your best to keep the legend text brief.
Some assistive technologies announce the legend before the label for
every field in the
fieldset
. That could get quite repetitive.
