SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Camas, WA (USA)
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple input selects on one line, no labels?

    In a form I'm working with, I'm struggling with the proper code for usability vs. accessibility. I'm actually running into this a lot more now that I'm concentrating on accessibility. There are lots of times that I'd like multiple inputs on one line without any label, because visually it's pretty obvious. However, I was under the impression that for accessibility all form elements needed labels.

    I can style whatever layout with CSS, but I'm looking at the right code first. I could hide the labels with CSS, but is that OK for screen readers? Should I just omit the labels? Should I enclose the whole thing in a fieldset (as in the example) or would a div work better? Any help is greatly appreciated!

    An example easy to use visual format is simply:
    Time of appointment: | [HOURS][MINUTES] to [HOURS][MINUTES] +am-pm

    HTML Code:
    <fieldset id="time">
    <legend>Time of appointment</legend> 
      <select name="start_hour">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        ...etc
      </select>
    
      <label for="start_minute">Start minute</label>
      <select name="start_minute">
        <option value="00">00</option>
        <option value="05">05</option>
        <option value="10">10</option>
        ...etc
      </select>
    
      to
    
      <label for="end_hour">End hour</label>
      <select name="end_hour">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        ...etc
      </select>
    
      <label for="end_minute">End minute</label>
      <select name="end_minute">
        <option value="00">00</option>
        <option value="05">05</option>
        <option value="10">10</option>
        ...etc
      </select>
    
      <input type="radio" name="ampm" id="ampm_am" value="am" checked="checked" />
      <input type="radio" name="ampm" id="ampm_pm" value="pm" />
    </fieldset>

  2. #2
    SitePoint Guru LinhGB's Avatar
    Join Date
    Apr 2004
    Location
    Melbourne, Australia
    Posts
    902
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put each <label><select> combo in div.form-block and float:left them with appropiate widths and margins. Have an outer div that applies clearing to the whole lot (like the clearfix trick from positioniseverything for instance).
    "I disapprove of what I say,
    but I will defend to the death my right to say it."

  3. #3
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, for points to an id, not a name. id and name don't have to be the same. In fact, in the case of a radio button group, they have to be different:
    HTML Code:
    <fieldset>
     <legend>Sex</legend>
     <input id="sex-male" type="radio" name="sex" value="male">
     <label for="sex-male">Male</label>
     <input id="sex-female" type="radio" name="sex" value="female">
     <label for="sex-female">Female</label>
    </fieldset>
    You could use implicit labels, although IE6 users won't be able to click the label:
    HTML Code:
    <fieldset>
     <legend>Sex</legend>
     <label><input type="radio" name="sex" value="male"> Male</label>
     <label><input type="radio" name="sex" value="female"> Female</label>
    </fieldset>
    Screen readers will, according to some testing, read labels even if they are hidden. You could use the title="" attribute instead of a label, since screen readers will fall back to the title attribute if there is no label, AFAIK.
    HTML Code:
      <select name="start_minute" title="Start minute">
        <option>00</option>
        <option>05</option>
        <option>10</option>
        ...etc
      </select>
    (Note that value defaults to the contents of the option.)
    Simon Pieters

  4. #4
    SitePoint Evangelist tetsuo shima's Avatar
    Join Date
    Oct 2005
    Location
    Switzerland
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    rep++ to Simon. Always on top of things. Not relevant to this thread but I couldn't help.
    The SEO Faq thread
    Dependency injection made easy: Phemto

  5. #5
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Camas, WA (USA)
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the great tips. Should I put each radioset in a fieldset? If not, what is the proper way to label the group of radio buttons?

    ie...SEX [+Male -Female]

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wbtenor
    Should I put each radioset in a fieldset?
    Yes. This is exactly what fieldsets were designed for; grouping related form controls.
    Simon Pieters


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
  •