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?



&lt;form method="get" novalidate&gt;
&lt;div class="table"&gt;
  &lt;div class="table-row"&gt;
    &lt;div class="table-cell label"&gt;

      &lt;label for="r1-group"&gt;Pet Type&lt;/label&gt;

    &lt;/div&gt;
    &lt;div class="table-cell input"&gt;
      &lt;div id="r1-group" class="table-row radio-group neg41"&gt;
        &lt;div class="table-cell"&gt;

          &lt;input id="r3" name="same2" type="radio" /&gt;
          &lt;label for="r3" class="radio-label"&gt;Cat&lt;/label&gt;

        &lt;/div&gt;
        &lt;div class="table-cell"&gt;

          &lt;input id="r4" name="same2" type="radio" /&gt;
          &lt;label for="r4" class="radio-label"&gt;Dog&lt;/label&gt;

        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;
&lt;/form&gt;


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

&lt;form method="get" novalidate&gt;
&lt;fieldset class="table"&gt;
  &lt;div class="table-row"&gt;
    &lt;div class="table-cell label"&gt;

      &lt;legend for="r1-group"&gt;Pet Type&lt;/legend&gt;

    &lt;/div&gt;
    &lt;div class="table-cell input"&gt;
      &lt;div id="r1-group" class="table-row radio-group"&gt;
        &lt;div class="table-cell"&gt;

          &lt;input id="r3" name="same2" type="radio" /&gt;
          &lt;label for="r3" class="radio-label"&gt;Cat&lt;/label&gt;

        &lt;/div&gt;
        &lt;div class="table-cell"&gt;

          &lt;input id="r4" name="same2" type="radio" /&gt;
          &lt;label for="r4" class="radio-label"&gt;Dog&lt;/label&gt;

        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/fieldset&gt;
&lt;/form&gt;


Should I be bolstering this with Schema's microdata and aria to improve semantics instead?
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:

&lt;form method="get" novalidate&gt;

  &lt;label&gt;Pet Type&lt;/label&gt;

  &lt;input id="r3" name="same2" type="radio" /&gt;
  &lt;label for="r3"&gt;Cat&lt;/label&gt;

  &lt;input id="r4" name="same2" type="radio" /&gt;
  &lt;label for="r4"&gt;Dog&lt;/label&gt;

&lt;/form&gt;


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.:

&lt;form method="get" novalidate&gt;

  &lt;div role="radiogroup"&gt;
    &lt;label&gt;Pet Type&lt;/label&gt;

    &lt;input id="r3" name="same2" type="radio" /&gt;
    &lt;label for="r3"&gt;Cat&lt;/label&gt;

    &lt;input id="r4" name="same2" type="radio" /&gt;
    &lt;label for="r4"&gt;Dog&lt;/label&gt;
  &lt;/div&gt;

&lt;/form&gt;


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