Radio buttons

Radio buttons are also control elements. You can make multiple selections with a list of checkboxes, but with radio buttons you’ll eventually force the user to choose between this or that. Either way, radio buttons will also benefit from correct usage of the label. Here’s an example:

<label>
 <input type="radio" name="colour" value="blue"> Blue
</label>
<label>
 <input type="radio" name="colour" value="green"> Green
</label>

Let’s have a look at what VoiceOver, ChromeVox and Narrator will say:

VoiceOver

Blue, radio button, 1 of 2; Blue

Green, radio button, 2 of 2; Green

After clicking on a radio button (or the corresponding text/label):

Green, selected radio button, 2 of 2

And without the label:

radio button, 1 of 2

selected radio button, 2 of 2

Okay? What’s this radio button for?? I don't get it without the label.

ChromeVox

Blue, radio button unselected

Green, radio button selected

And without the label we get this after clicking on the text:

blue green

ChromeVox will collect all the text within the form and read it out loud. After clicking on a radio button it will say this:

selected

Narrator

Windows’ Narrator is a little bit more precise. The given structure will give us:

Selected, blue, radio button, selected, 1 of 1

Selected, green, radio button, selected, 1 of 1

In this case we have to do it the “old fashion way” and add the ID as well as the FOR:

<input name="colour" value="blue" id="choice1" type="radio">
<label for="choice1"> Blue</label>
<input name="colour" value="green" id="choice2" type="radio">
<label for="choice2"> Green</label>

Now we’ll get this read out loud by Narrator:

Selected, blue, radio button, selected, 1 of 2

Selected, green, radio button, selected, 2 of 2

Video example

As you can see, it’s very important to establish some kind of relationship between the control element and its label. Don’t just write the label - use proper markup instead, i.e. use the <label>.