1

I'm trying to figure out how to mark up some code using WCAG standards, but it's a little complicated when I run into this situation:

<div class="form-group">

    <label>Entry Method</label>

    <div>
        <label>
            <input type="radio" /> Upload file
        </label>

        <label>
            <input type="radio" /> Enter Manually
        </label>

        <label>
            <input type="radio" /> Load Template
        </label>
    </div>
</div>

What do I do with the first "label"? How do I use "for" and "id" in this scenario?

Matthieu FAURE
  • 383
  • 3
  • 11
Mia Poulos
  • 11
  • 1

1 Answers1

7

A label accompanies a single form field, rather than a group of fields. Grouping form fields is achieved using a fieldset instead of a div, which is accompanied by a legend instead of a label:

<fieldset class="form-group">

    <legend>Entry Method</legend>

    <div>
        <label>
            <input type="radio" /> Upload file
        </label>

        <label>
            <input type="radio" /> Enter Manually
        </label>

        <label>
            <input type="radio" /> Load Template
        </label>
    </div>
</fieldset>

See H71 of WCAG 2.0 for a detailed write-up.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • That's what I want to do, but is used elsewhere with different css attached to it that can't apply to this. Is there another appropriate tag? – Mia Poulos Oct 23 '13 at 15:34
  • 1
    No, I'm afraid there isn't. You'll have to see if you can override those styles somehow. – BoltClock Oct 23 '13 at 15:51