I am <legend>: the form element with special powers
Posted Jan 11, 2020
Share
If you know anything about web accessibility, then you probably already know that all <input> elements need to have a <label> (or failing that, an aria-supplied label).
What you may not know is what to do when you have something like this:
The radio buttons have… two labels. How do you have two labels?
2 labels 1 input
Now you might be forgiven for thinking that the way to solve this problem is as simple as it sounds:
<label>
What do you have for sale?
<label>
<input type="radio" name="sale" value="spam">
Spam
</label>
<label>
<input type="radio" name="sale" value="morespam">
More Spam
</label>
</label>
Unfortunately this doesn’t work. According to the [...]