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 id=r1-group class=table-row radio-group neg41>        <div class=table-cell>          <input id=r3 name=same2 type=radio />          <label for=r3 class=radio-label>Cat</label>        </div>        <div class=table-cell>          <input id=r4 name=same2 type=radio />          <label for=r4 class=radio-label>Dog</label>        </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 id=r1-group class=table-row radio-group>        <div class=table-cell>          <input id=r3 name=same2 type=radio />          <label for=r3 class=radio-label>Cat</label>        </div>        <div class=table-cell>          <input id=r4 name=same2 type=radio />          <label for=r4 class=radio-label>Dog</label>        </div>      </div>    </div>  </div></fieldset></form>Should I be bolstering this with Schema's microdata and aria to improve semantics instead?
Radio group labelling and semantics
html;css;html5;css3
You cant use the label element like that. Its for attribute may only refer to labelable elements (and div isnt labelable).Semantic markup(Assuming that you cant 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>  <input id=r3 name=same2 type=radio />  <label for=r3>Cat</label>  <input id=r4 name=same2 type=radio />  <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.AccessibilityWAI-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>  <div role=radiogroup>    <label>Pet Type</label>    <input id=r3 name=same2 type=radio />    <label for=r3>Cat</label>    <input id=r4 name=same2 type=radio />    <label for=r4>Dog</label>  </div></form>(HTML5 recommends not to set role=radio for the radio buttons explicitly, but you may do so if you want to.)