SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Labels in front or behind form input?

    Trying to make a form accessible and can't remember if the label should go in front or behind the input field to make sure the item wanted is the item selected (i.e. checkbox, radio)

    Any help would be appreciated,
    jodmcc

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,174
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    I believe the "convention" is to have the label text rendered above or to the left of text inputs, and to the right of radio and checkbox inputs.

    But the important thing is that the relationship is clear to the user.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In a left-to-right reading environment, the convention is as Mittineague described: labels above or to the left of text fields, password fields, file selectors, textareas and select lists; labels to the right of checkboxes and radio buttons.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    Austin Texas
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've noticed the labels are to the right of inputs as default on Wordpress, so it ends up in a lot of blogs and has become pretty common. I'm still a fan of having labels on the left.

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,174
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    I was thinking that other than label text position in terms of usability, in terms of accessability the label tag itself should always be before the input. i.e.

    <label ....
    Name:
    <input type="text" ....
    </label>

    <label ....
    <input type="radio" ....
    Gender:
    </label>

    AFAIK, this syntax will allow screen readers to "say" the label text alerting the impaired user of the input correctly.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not necessary. It's better to make the association explicit, using the for attribute of the label. Wrapping the input inside the label will cause problems in some versions of Window-Eyes, I think.

    Code HTML4Strict:
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
     
    <input type="radio" name="gender" id="gender-female" value="F">
    <label for="gender-female">Female</label>
    Birnam wood is come to Dunsinane

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,174
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Ah, leave to a coder's favorite browser to throw gravel into the grain.

    :d'oh: I realize I was thinking of the label as more of a type of <span> and forgot it can recieve focus for the input thereby extending it's "clickable area".

    So even if the label is after the input, and the screen reader is past the input, as long as the impaired user "clicks" on the label, since it's explicitly associated with the input before it, the correct input will receive the "click".

    And following the conventional de-facto standard will help ensure that the user instinctively "knows" what belongs with what.

    @AutisticCuckoo, Thanks for bringing up the syntax snafu making me think about it a bit more. I wouldn't want others to pick up a bad habit based on an example I made in a :d'oh: post.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not necessarily a snafu. The syntax you posted should work, but some screen readers have problems with it. While I'm normally against perverting markup to cater for broken user agents, in this case there's a perfectly valid and semantically correct alternative.

    I do wrap some inputs inside labels on our intranet, though, since it makes it easy to have adjacent inputs with the label above them. We don't have any Window-Eyes users in our organisation, though.
    Birnam wood is come to Dunsinane


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
  •