CODEWITHSUNDEEP
htmlaccessibilitywcag
Mia Poulos
Mia Poulos

Reputation: 11

Accessibilty for WCAG Standards - How to handle a label within a label

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?

Upvotes: 1

Views: 120

Answers (1)

BoltClock
BoltClock

Reputation: 724452

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.

Upvotes: 7

Related Questions