Vertical Radio Buttons

[cpradio]

Further research seems to indicate you should use fieldset for radio buttons, and the main reason is to make it easier from an accessibility standpoint.
http://www.w3.org/WAI/GL/WCAG20/tests/test168.html

[mikey_w]

Based on some preliminary research, it sounds like maybe you are always (?) supposed to wrap radio buttons in Fieldset for accessibility reasons?

Maybe it ties things together for screen-readers?

My radio buttons are on a page where users can tell us about themselves.

In this case, I visually don’t want a Fieldset or Legend complicating my form.

Please advise…

[RyanReese]

Those exist to help users; not complicate things .

Edit-Timeout; Need lunch now. Chicken Parm is calling…

[mikey_w]

@cpradio

Further research seems to indicate you should use fieldset for radio buttons, and the main reason is to make it easier from an accessibility standpoint.
http://www.w3.org/WAI/GL/WCAG20/tests/test168.html

That’s the same link I just read!!

[cpradio]

@mikey_w

Based on some preliminary research, it sounds like maybe you are always (?) supposed to wrap radio buttons in Fieldset for accessibility reasons?

Maybe it ties things together for screen-readers?

Yes and Yes

@mikey_w

In this case, I visually don’t want a Fieldset or Legend complicating my form.

You should be able to strike any visual elements the tags add via CSS (of which Ryan will be able to successfully answer).

[mikey_w]

@cpradio

You should be able to strike any visual elements the tags add via CSS.

So you are advising me to add a Fieldset and Legend, but use CSS to hide them visually?

[cpradio]

@mikey_w

So you are advising me to add a Fieldset and Legend, but use CSS to hide them visually?

If accessibility is a big concern for you, then yes, I would recommend that. Granted, the link is a draft from 2005, so chances are screen readers have already adapted to run well without such elements on the page.

[RyanReese]

They shouldn’t really complicate things though.

Just add them and you should see that it isn’t that really terrible to have. I personally like the guidance.

[mikey_w]

@RyanReese

They shouldn’t really complicate things though.

Just add them and you should see that it isn’t that really terrible to have. I personally like the guidance.

Are you eating and SitePointing at the same time?

How that Chicken Parm working for you? (I’m jealous!!)

What I was asking, Ryan, is can I add Fieldset/Legend but visually hide them?

If the Fieldset/Lengend help non-sighted users, then great. But for this case, I don’t think having a Fieldset/Legend appear for sighted users would help, so I’d like to hide them visually.

[cpradio]

From what I recall, the only visual components that get added are a border and maybe some padding (but I could be mistaken) as shown below

[RyanReese]

@mikey_w

Are you eating and SitePointing at the same time?

How that Chicken Parm working for you? (I’m jealous!!)

Yup; I have Sitepoint up all day. The line was long so I ended up with some pizza…mmmmmmm yum.

Visibility:hidden; hides the information yet still allows screen readers to read it.

[cpradio]

And with removing the border/padding:

I don’t think you want to use visibility:hidden, as your fields are in the fieldset and that would effectively hide them.

[RyanReese]

Oh, right. Brainfart .

Styling form elements is a lot better than it used to be. Used to be like pulling teeth.

[felgall]

@mikey_w

Should I wrap my Radio Buttons in something?

When I look back at my code for Gender, I just had this…

<!-- Gender –>
<label for=“gender”>Gender:</label>
<label class=“inlineRadioLabel” for=“gender_opt1”>
<input id=“gender_opt1” type=“radio” name=“gender” value=“1” <?php echo (isset($gender) && $gender == “1”) ? ‘checked=“checked”’ : ‘’; ?>/>
Male
</label>

<label class=“inlineRadioLabel” for=“gender_opt2”>
<input id=“gender_opt2” type=“radio” name=“gender” value=“2” <?php echo (isset($gender) && $gender == “2”) ? ‘checked=“checked”’ : ‘’; ?>/>
Female
</label>

So that people can tell what buttons belong together you should use:

<fieldset>
<legend>Gender:</legend>                        
<label class="inlineRadioLabel" for="gender_opt1">
  <input id="gender_opt1" type="radio" name="gender" value="1" <?php echo (isset($gender) && $gender == "1") ? 'checked="checked"' : ''; ?>/>
   Male
</label>
                        
<label class="inlineRadioLabel" for="gender_opt2">
   <input id="gender_opt2" type="radio" name="gender" value="2" <?php echo (isset($gender) && $gender == "2") ? 'checked="checked"' : ''; ?>/>
    Female
</label></fieldset>

With a radio button group the legend identifies what is being asked for and the labels identify the individual selections in the group. The fieldset draws a border around the group so that you don't get the buttons confused with those in the adjacent group.