Faked Fieldset/Legend using ARIA

Admittedly, browsers have a quite peculiar opinion on how to visually style <fieldset>/<legend> structures, and it is quite hard to override their preferences.

So if for visual (or any other serious) reason you cannot use standard <fieldset>/<legend>, you may take ARIA to the rescue:

  • Use role="group" to give a <div> container the semantics of a <fieldset>.
  • Associate any other text to the grouping container using aria-describedby.

Working Example

Gender

Explanation

As always, we highly recommend to use traditional solutions over ARIA, so if you haven’t done this yet, go back and read ARIA – when HTML simply is not enough.

Code

<form>
  <div aria-describedby="gender_legend" class="fieldset" role="group">
    <div class="legend" id="gender_legend">
      Gender
    </div>
    <div class="control">
      <input id="gender_male" name="gender" type="radio" value="male" /><label for="gender_male">Male</label>
    </div>
    <div class="control">
      <input id="gender_female" name="gender" type="radio" value="female" /><label for="gender_female">Female</label>
    </div>
  </div>
</form>
.control, .fieldset {
  margin: 6px 0;
}

label, .label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

input + .label {
  width: auto;
}

.fieldset {
  position: relative;
  border: 2px groove threedface;
  padding: 10px;
  margin-bottom: 20px;
}

legend, .legend {
  background-color: #fff;
  position: absolute;
  left: 10px;
  top: -12px;
  padding: 2px;
}
NIL