0
\$\begingroup\$

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?

\$\endgroup\$
6
  • \$\begingroup\$ Why is this tagged CSS when there is no CSS here? Also tagged as HTML5 when there are no new HTML5 elements. \$\endgroup\$
    – cimmanon
    Mar 4, 2015 at 22:45
  • \$\begingroup\$ 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. \$\endgroup\$
    – darcher
    Mar 4, 2015 at 23:18
  • 2
    \$\begingroup\$ 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. \$\endgroup\$ Mar 4, 2015 at 23:46
  • \$\begingroup\$ 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. \$\endgroup\$ Mar 4, 2015 at 23:50
  • \$\begingroup\$ @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. \$\endgroup\$
    – darcher
    Mar 5, 2015 at 0:12

1 Answer 1

2
\$\begingroup\$

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>

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

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>

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

\$\endgroup\$
1
  • \$\begingroup\$ Thanks, these links and your answer really helped me sort through the things I was unsure on. Great answer! \$\endgroup\$
    – darcher
    Mar 5, 2015 at 17:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.