# Radio group labelling and semantics

I can't seem to get fieldset's to react properly when using display:table and display:table-cell even if I reset the default values, it just reacts oddly in a variety of ways in different browsers/devices, so as a result I have actually removed all fieldset's and replaced them with div's.

Is this a semantically accurate method to label a radio group? or is there a better more semantic method aside from using fieldset/legend?

<form method="get" novalidate>
<div class="table">
<div class="table-row">
<div class="table-cell label">

<label for="r1-group">Pet Type</label>

</div>
<div class="table-cell input">
<div class="table-cell">

</div>
<div class="table-cell">

</div>
</div>
</div>
</div>

</div>
</form>


I've always approached it in this manner, but to avoid using flexbox and floats I used the above instead.

<form method="get" novalidate>
<fieldset class="table">
<div class="table-row">
<div class="table-cell label">

<legend for="r1-group">Pet Type</legend>

</div>
<div class="table-cell input">
<div class="table-cell">

</div>
<div class="table-cell">

</div>
</div>
</div>
</div>
</fieldset>
</form>


Should I be bolstering this with Schema's microdata and aria to improve semantics instead?

• Why is this tagged CSS when there is no CSS here? Also tagged as HTML5 when there are no new HTML5 elements. – cimmanon Mar 4 '15 at 22:45
• The CSS is listed encase someone perhaps knows a work around to the CSS oddities with fieldset, and similarly if there are html5 elements that aren't being used that may fit this situation better. – darcher Mar 4 '15 at 23:18
• The complaint about rendering sounds like a Stack Overflow question. If you want to use a fieldset, but you can't get it to render the way you want, ask on SO, stating what your expected rendering is, how the actual result differs, what browsers you have tested. – 200_success Mar 4 '15 at 23:46
• On the other hand, the semantic judgement question is still on-topic on Code Review. I think that fieldset is probably overkill for a single radio choice. – 200_success Mar 4 '15 at 23:50
• @200_success yup, that was my thought, hence why I didn't ask about CSS question, just mentioned it as a reason this situation came to light, and tagged encase someone wanted to add input. – darcher Mar 5 '15 at 0:12

You can’t use the label element like that. Its for attribute may only refer to "labelable elements" (and div isn’t labelable).

### Semantic markup

(Assuming that you can’t use fieldset.)

You can ignore all the div elements (except their "meaningful" attributes, if any), because they are meaningless. So your markup is essentially this:

<form method="get" novalidate>

<label>Pet Type</label>

<label for="r3">Cat</label>

<label for="r4">Dog</label>

</form>


Having a label without associated form control is not wrong, but maybe uncommon. It "represents a caption in a user interface", so I guess you could keep it like that.

If you want more "structure", you could use the dl element. However, I think it might be overkill for such a simple case.

### Accessibility

WAI-ARIA recommends "that elements with role radio are explicitly grouped in order to indicate which ones affect the same value".

(In HTML5, input elements in the radio button state have the radio role by default.)

How to group them explicitly?

This is achieved by enclosing the radio elements in an element with role radiogroup.

So you should use the radiogroup role, e.g.:

<form method="get" novalidate>

<label>Pet Type</label>


(HTML5 recommends not to set role="radio" for the radio buttons explicitly, but you may do so if you want to.)