My web application uses forms laid out as in the example below...
First Name [____________]
Last Name [____________]
Gender () Male () Female
The markup I use is something like...
<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<label>Gender</label>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="sex" id="sex-m" value="m">
<label for="sex-m">Male</label>
<input type="radio" name="sex" id="sex-f" value="f">
<label for="sex-f">Female</label>
</fieldset>
I have the following issues that I don't know how to solve...
I want to have the WHOLE GROUP of radio buttons labelled like any other field (as in the diagram above), but there is nothing to link the label to (i.e. nothing for its "for" attribute, since each radio in the group has its own label just for the value of the individual radio button) A label without a "for" attribute will not pass accessibility compliance.
The <legend> element of the fieldset seems to duplicate the function of the label. Is this really necessary?
I had thought about styling the <legend> tag to appear as though it's a label, and dispense with the label altogether for the radio button group, but that seems a bit hacky to me, and will also introduce complexities elsewhere in my code (which relies on <label> elements to do some nifty validation message markup and various other things)
Thanks in advance.
Checkboxes and radio buttons are elements for making selections. Checkboxes allow the user to choose items from a fixed number of alternatives, while radio buttons allow the user to choose exactly one item from a list of several predefined alternatives.
To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag. While using <label> isn't strictly necessary, it's considered a best practice for two reasons.
Labels for radio buttons and checkboxes are positioned after the field. These positions are defined because that is the usual (and therefore most predictable) position for the label for fields, radiobuttons and checkboxes. Labels are positioned before input fields since the fields sometimes vary in length.
The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices. Tip: Always add the <label> tag for best accessibility practices!
The first part of Ssollinger's answer is correct:
The code should be:
<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
<legend>Gender</legend>
<input type="radio" name="sex" id="sex-m" value="m">
<label for="sex-m">Male</label>
<input type="radio" name="sex" id="sex-f" value="f">
<label for="sex-f">Female</label>
</fieldset>
When assistive technology hits the male radio button, most will read as: "Gender: male radio button 1 of 2 not selected."
Then you could use CSS on the fieldset
, legend
, the labels and inputs
. If memory serves correctly fieldsets can be a bear to style, so i might end up adding a <div>
to it:
<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
<legend>Gender</legend>
<div>
<input type="radio" name="sex" id="sex-m" value="m">
<label for="sex-m">Male</label>
<input type="radio" name="sex" id="sex-f" value="f">
<label for="sex-f">Female</label>
</div>
</fieldset>
Adding this <div>
has no accessibility implications.
Like in the comment in ssollinger's answer, you could dump the fieldset
and legend
approach, but you would need to build everything to make it accessible, an example of a build out
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With