The right way to do radio buttons?

css, html, javascript, webforms

Solution

For accessibility:

- Organize your radio buttons as a `fieldset` and give it a `legend` attribute, so that screen-readers understand what each group of radio buttons means.

- Give each radio button an ID, and use the ID in the `for=""` attribute of an associated `label` element. This isn't just good for accessibility - it also means you can select a radio button by clicking the label (which is much bigger and easier to hit than the radio button itself)

Then, use CSS to style your `fieldset`, `legend` and `label` attributes to match your site design, as in this example:

<html>
    <head>
        <style>
        body {
            font-family: arial;
            font-size: 15px;
            line-height: 1.4em;
        }
        fieldset.radioGroup  { border: none; }
        fieldset.radioGroup  legend { font-weight: bold; }

        /* Make each radio/label render on a new line */
        fieldset.radioGroup  label { display: block; }

        /* add some horizontal spacing between radio buttons and their label text */
        fieldset.radioGroup label input { margin-right: 32px; }
        </style>
    </head>
<body>
    <fieldset class="radioGroup">
        <legend>Skill Level</legend>
        <label for="neverPlayedRadioButton">
            <input type="radio" name="skill" value="neverPlayed" id="neverPlayedRadioButton" />
            Never Played
        </label>
        <label for="unorganizedPickupRadioButton">
                <input type="radio" name="skill" value="unorganizedPickup" id="unorganizedPickupRadioButton" />
                Unorganized Pickup
        </label>
        <label for="organizedPickupRadioButton">
            <input type="radio" name="skill" value="organizedPickup" id="organizedPickupRadioButton" />
            Organized Pickup / League Play
        </label>
    </fieldset>
</body>
</html>

Problem

So.. I have been trying to avoid radio buttons at all cost in my web development projects because I just cant figure out the right way to code them. Do you set a label for radio button.. if so, how does that work for screen readers. The way I have been doing most of my forms is by using un-ordered lists. Each input being a list item. I just always run into trouble when doing radio buttons. I can never get it to look right across all browsers.. For example, look at http://usfultimate.com/index.php/hatter/register . Does this structure make sense? Quick structure sample: ``` <ul> <li> <label for='first_name'>First Name:</label> <input type="text" name="first_name" value="" /> </li> <li> <label for='last_name'>Last Name:</label> <input type="text" name="last_name" value="" /> </li> <li> <label for='email'>Email Address:</label> <input type="text" name="email" value="" /> </li> <li class="radio"> <ul> <li> <input type="radio" name="skill" value="Never Played" id="neverPlayed" /> <label for="neverPlayed">Never Played</label> </li> <li> <input type="radio" name="skill" value="Unorganized Pickup" id="unorganizedPickup" /> <label for="unorganizedPickup">Unorganized Pickup</label> </li> <li> <input type="radio" name="skill" value="Organized Pickup / League Play" id="organizedPickup" /> <label for="organizedPickup">Organized Pickup or League Play</label> </li> <li> <input type="radio" name="skill" value="Played on a Competative Team" id="competativeTeam" /> <label for="competativeTeam">Competative Team</label> </li> <li> <input type="radio" name="skill" value="Baller Shot Caller" id="baller" /> <label for="baller">Baller Shot Caller</label> </li> </ul> </li> </ul> ``` Any pointer would be appreciated!

Original source