SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,786
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Radio Buttons without Label

    Is it possible to have Radio Buttons without Labels?

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

    Code:
    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

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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".

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,786
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    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

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,786
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    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

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,786
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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...

    Attachment 60452


    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

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.

  9. #9
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Yes, a subscription status checkbox would be better: checked for subscribe, unchecked for not subscribed/unsubscribe.

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,786
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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...

    Code:
    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

  11. #11
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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...

    Code:
    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>.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •