Semantic Markup for Checkboxes and Radios

Hi all,

Quick question - what is the semantically correct way to mark up radio buttons and check boxes? Effectively I’m wondering where the label tag fits?



PS - I obviously searched for this but the SERPS are terrible on the topic.

<input type="checkbox" value="yes" name="choice" id="choice">
<label for="choice">I choose</label>

<!--Radio buttons-->
<input type="radio" value="first" checked name="choices" id="choice-first">
<label for="choice-first">First choice</label>

<input type="radio" value="second" name="choices" id="choice-second">
<label for="choice-second">Second choice</label>

Convention dictates that the labels appear to the right of the checkbox/radio button in a left-to-right reading environment.

Thanks Tommy - appreciated.


HTML God! :smiley:

Fo further expand on this…To label a group of radio buttons, or check boxes, I always use a paragraph.

<p>Is oxygen essential to human life on earth?</p>
<input type="radio" value="yes" name="choices" id="oxygen-yes">
<label for="oxygen-yes">Yes</label>
<input type="radio" value="no" name="choices" id="oxygen-no">
<label for="oxygen-no">No</label>

I don’t think that’s semantically appropriate. To group form fields, use a fieldset:

  <legend>Is oxygen essential to human life on earth?</legend>

  <input type="radio" value="yes" checked name="oxygen" id="oxygen-yes">
  <label for="oxygen-yes">Yes</label>

  <input type="radio" value="no" name="oxygen" id="oxygen-no">
  <label for="oxygen-no">No</label>

(BTW, both radio buttons were marked as checked in your example. :))

You can’t use a non-form element anyway if you want screen readers in Forms Mode to list them.

What you would hear in JAWS is just the individual check/radios and their respective labels.

I’ve struggled with this for a long time. Currently, I’m doing this:

(sometimes a legend if it’s short)
<label>Is oxygen essential to human life on earth?</label>
<label for=“oxyyes”><input type=“radio” name=“oxygen” id=“oxyyes” value=“ja”></label>
<label for=“oxyno”><input tpye=“radio” name=“oxygen” id=“oxyno” value=“nee”></label>

An unnamed unaffiliated label will at least get read out. The problem with legends is sometimes the question needs to visually match up with all the others (who are likely labels) and legends simply can’t be positioned correctly (nor styled well) cross-browser. Esp Firefox : ( I hate that browser when it comes to forms and tables.

Another option is, again only if it’s short, use a legend who’s set off-screen (so still read out) and then a <p> for the sighted visitors.

<legend>Is oxygen essential to human life on Earth?</legend>
<p>Is oxygen essential to human life on earth?</p>

Usually the question is too long for legend though : ( JAWS for instance will read out the whole dang thing for each and every question inside an inner/nested fieldset.

In which case you may still have an inner fieldset for those questions, but you’ll still have something like an unnamed label for the full question.
<label for=“machtiging”>Indien dit wordt gedaan met een ART-Slot, wat is het type?</label>

(tpye changed to type)

Question: I presume that the radio labels that aren’t there, should be there?

Yeah, after the input and before the closing </label> tag, lawlz. Thanks for catching that. I also add a space between the end of the input and beginning of the label text-- every browser so far has done well with that, so I’ve been using that instead of the nonbreaking space. CSS right margin on the input itself takes care of any other needed spacing.

<label for="oxyyes"><input type="radio" name="oxygen" id="oxyyes" value="ja"> Yes</label>
<label for="oxyno"><input type="radio" name="oxygen" id="oxyno" value="nee"> No</label>