Posted Jan 11, 2020
If you know anything about web accessibility, then you probably already know that all
elements need to have a
(or failing that, an aria-supplied
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:
Unfortunately this doesn’t work. According to the spec, a
Phrasing content, but with no descendant labelable elements unless it is the element’s labeled control, and no descendant label elements.
You also can’t do this:
Unfortunately, the for attribute only takes a single ID.
Great. So now what?