The correct way to do radio buttons?
So, I've been trying to avoid radio buttons at all costs in my web development projects because I just can't seem to find the right way to code them.
You are setting a label for a switch. if so, how does it work for screen readers.
The way I do most of my forms is using unordered lists. Each input is an element of a list. I always run into problems when working with switches. I can't get it to look straight across all browsers.
For example, see http://usfultimate.com/index.php/hatter/register . Does this structure make sense?
An example of a quick structure:
<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!
source to share
For availability:
- Organize your radio buttons as
fieldset
and assign an attributelegend
to it so that screen readers understand what each group of radio buttons means. - Give each radio button an ID and use the ID in the attribute of the
for=""
related elementlabel
. Not only is this useful for accessibility - it also means that you can select a radio button by clicking on a label (which is much larger and easier to hit than the radio button itself).
Then use CSS to style your attributes fieldset
, legend
and label
according to your site design, like 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>
source to share
You can use an attribute for
to explicitly associate an element label
with a form element, such as a checkbox or radio button, as shown in the example.
Also, in HTML 4.01 you can also implicitly bind label
to a form element by doing the following (example from linked w3c page):
<FORM action="..." method="post">
<P>
<LABEL>
First Name
<INPUT type="text" name="firstname">
</LABEL>
<LABEL>
<INPUT type="text" name="lastname">
Last Name
</LABEL>
</P>
</FORM>
This is sometimes more convenient, but not always suitable, for example, in scenarios where yours are label
not adjacent to form elements in HTML (such as a table).
source to share
Your code is wrong in that your input tags are inside your label elements. Ideally, labels should contain only text. Otherwise, your code will be completely correct.
Some things to keep in mind are that users using screen readers cannot set a common context for a set of radio buttons and the little text that established that common context. Others have pointed out that you set your radio buttons on the fieldset and use a legend item to set that context. However, the ideal solution for accessibility is that the textual meaning and label are intelligible enough to be fully understood. In your example, a blind user is likely to have trouble understanding that "disorganized pickup" is a choice in relation to skill level. It would be easier to paraphrase this to say something like "unorganized pickup skill level". Then there is absolutely no confusion aboutwhich means switch.
You've used an unordered list to structure your radio buttons. This is normal. You can also use paragraphs grouped under a box or div container. What matters is how you want the structure of these elements to be passed. An unordered list offers a series of things where the enumeration of that series doesn't matter, but the elements of the series are needed to represent the meaning of the series as a whole. A group of paragraphs proposes a formal content declaration in which each paragraph is intended to be explicitly consumed with no direct relation to other similar elements in the group, the order of such elements, or the number of such elements if each paragraph is individually consumed. Semantic structure is important, but more important is that you want such a structure to interact to help technology,which should analyze and analyze your code.
Your code follows the more stringent XHTML requirements. Good. Do not deviate from uniform rigor to flexible incompetence simply because such incompetence is usually tolerated.