Radio Buttons without Label

[DoubleDee]

Is it possible to have Radio Buttons without Labels?

I am building a "Manage Subscriptions" page where I have the following data layout...

Subscribe	Unsubscribe	Article
---------	-----------	-------
X				Building a Mobile App
		X		Is AJAX for Me?
X				Should You Support IE6?
X				Top 10 Developer Tips

I was thinking of dropping the Radio Button Labels and instead putting things into an HTML Table and letting my Column Headings describe the data...

So is that possible?

Thanks,


Debbie

[xhtmlcoder]

It is possible but unusual and not normally considered either sensible or accessible not using the LABEL for radio buttons. Because without a LABEL you cannot easily access the radio buttons themselves. Losing the benefits of the LABEL element which is a form control that explicitly associates and the group of radio button(s) with the specific control in question. Using some CSS instead to position might be a solution if it's purely presentational layout. In either case why drop the LABEL you could use it in a TABLE anyway it makes little sense dropping LABEL because the columns themselves have a different purpose to the buttons. It would only complicate matters and make extra work without the associated labels.

[xhtmlcoder]

Furthermore if you require an 'unselected state' a checkbox might be more appropriate. Since to "unsubscribe" you'd already have to be subscribed. To subscribe you may just want to check a single box or leave blank in the case of not wanting to subscribe. Plus in that demo you'd be making the assumption the user possibly wants to alter the state of all 4 items. Obviously depending on "default" radio 'checked' state, which of course if you were already subscribed would have to begin with that checked state. If not it would be the opposite 'default' state of; "not subscribed already".

[DoubleDee]

It is possible but unusual and not normally considered either sensible or accessible not using the LABEL for radio buttons. Because without a LABEL you cannot easily access the radio buttons themselves. Losing the benefits of the LABEL element which is a form control that explicitly associates and the group of radio button(s) with the specific control in question. Using some CSS instead to position might be a solution if it's purely presentational layout. In either case why drop the LABEL you could use it in a TABLE anyway it makes little sense dropping LABEL because the columns themselves have a different purpose to the buttons. It would only complicate matters and make extra work without the associated labels.

So how would I use LABELS and get the output in my original post?

It would look silly to have "Subscribe" and "Unsubscribe" next to each Radio Button when you have tabular data with repeating and identical rows like shown in my example.


Debbie

[DoubleDee]

Furthermore if you require an 'unselected state' a checkbox might be more appropriate.

That is a valid point.

I chose Radio Buttons because I think it communicates a two-state condition better.

On/Off

Up/Down

Subscribe/Unsubscribe

Since to "unsubscribe" you'd already have to be subscribed. To subscribe you may just want to check a single box or leave blank in the case of not wanting to subscribe.

That would be one way to do it.

Plus in that demo you'd be making the assumption the user possibly wants to alter the state of all 4 items.

That is why the web page is called "Manage Article Subscriptions".

You are supposed to see *all* of the Articles you subscribed to...


Debbie

[Stevie D]

It's perfectly possible (and valid HTML) to have radio buttons without labels ... but as Robert says, it's got problems associated with it. The first is that people then have to click the radio button itself, which is a smaller target and may be difficult for people with poor motor control or those using mobile devices. The second is that screen readers and other accessibility software will usually ignore HTML elements within a <form> that are not form controls (ie inputs, legends and labels), so while an HTML table would be semantically appropriate, it wouldn't be properly accessible. A more accessible option would just be to have a single check box by each article name, make the name into the <label> and do away with the <table> altogether.

[DoubleDee]

It's perfectly possible (and valid HTML) to have radio buttons without labels ... but as Robert says, it's got problems associated with it. The first is that people then have to click the radio button itself, which is a smaller target and may be difficult for people with poor motor control or those using mobile devices. The second is that screen readers and other accessibility software will usually ignore HTML elements within a <form> that are not form controls (ie inputs, legends and labels), so while an HTML table would be semantically appropriate, it wouldn't be properly accessible. A more accessible option would just be to have a single check box by each article name, make the name into the <label> and do away with the <table> altogether.

Gee, you guys are breaking my just completed subscription form?!

Here is what I have now...

ManageSubscriptions2.png


So you are saying you would lose the HTML Table and do it, what, as an Unordered List?

And do I hear you saying to make my "Article Title" the LABEL of the Check-Box?

Of course, as you can see, that would mess up my desire to have a thumbnail of the Article as well.

I am open to changing my Radio Buttons to a Single Check-Box for each row, but I'm not so sure about losing the Table...


Debbie

[Stevie D]

So you are saying you would lose the HTML Table and do it, what, as an Unordered List?

And do I hear you saying to make my "Article Title" the LABEL of the Check-Box?

Of course, as you can see, that would mess up my desire to have a thumbnail of the Article as well.

I am open to changing my Radio Buttons to a Single Check-Box for each row, but I'm not so sure about losing the Table...

Changing it to a single check box for each row, I would code it as a <ul>, but if you want to code it as a <table> that isn't a problem. The difference is that you're not relying on the column headings to convey essential information, which you are with label-less radio buttons – without the column headings of Subscribe/Unsubscribe, those radio buttons are meaningless, but a check box still makes sense.

There's no problem with including an <img> tag within the <label> if you want to retain the thumbnail.

[itmitică]

Yes, a subscription status checkbox would be better: checked for subscribe, unchecked for not subscribed/unsubscribe.

[DoubleDee]

Changing it to a single check box for each row, I would code it as a <ul>, but if you want to code it as a <table> that isn't a problem. The difference is that you're not relying on the column headings to convey essential information, which you are with label-less radio buttons – without the column headings of Subscribe/Unsubscribe, those radio buttons are meaningless, but a check box still makes sense.

Well, I just spent an enormous amount of time coding that Form and all of the PHP behind it to make it work, so it will stay as-is for now!!

But I will likely take your advice and switch to Check-Boxes in the near future.

There's no problem with including an <img> tag within the <label> if you want to retain the thumbnail.

Really?!

Wow! That is cool!

So if I take your advice and switch to Check-Boxes and an Unordered List with Thumbnails in the Article Label, what do I for Column Headings?

Just having this still isn't intuitive to users...

X			<some thumbnail> Building a Mobile App

__			<some thumbnail> Is AJAX for Me?

X			<some thumbnail> Should You Support IE6?

X			<some thumbnail> Top 10 Developer Tips

Debbie

[Stevie D]

So if I take your advice and switch to Check-Boxes and an Unordered List with Thumbnails in the Article Label, what do I for Column Headings?

Just having this still isn't intuitive to users...

X			<some thumbnail> Building a Mobile App

__			<some thumbnail> Is AJAX for Me?

X			<some thumbnail> Should You Support IE6?

X			<some thumbnail> Top 10 Developer Tips

It's a form, so <legend> would give a suitable heading (eg "Subscribe to...") and then wrap the legend and the checkbox list in a <fieldset>. You can style these to get rid of the default border on the <fieldset>.