SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Location
    San Antonio, Texas
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Aweber and labels

    Evening Point guards,

    Searching for my answer brought me to this section. I find this markup in "the Art & Science of CSS" Sitepoint also:

    <label for="first-name">
    First name
    <input type="text" name="firstName" id="first-name">
    </label>

    This use of the "label" element is in my Aweber form.
    <label class="previewLabel" for="awf_field-14932778"></label>

    My question is, does Aweber have the accessibility for those using assistive technology's like screen readers covered here, or do I need to add "label" elements where field fill-ins are (first name)?

    Scott

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I vaguely remember coming across a site with an Aweber form and it was atrocious... but may have been old.

    Anyway, the label is rather useless if it's as you've posted: without anything inside it. I also wouldn't go along with a label with an input inside it but still no label text. Screen reader users aren't the only users who want pages accessible: they should make sense to as many people as possible, if you want the most users to actually bother filling the form in.

    In general, for forms, you should have a label wherever there's an input. Every input should be labeled. The one exception that has become popular is the lack of a label on a search form... and if you just have the search button after the input, eyetracking studies show that people's eyes spend more time going back and forth between the search button and the input... and supposedly slows them down in using the form.

    Though eye movements are very fast and people don't make all of them consciously... so we don't know if it really makes form use harder. We do know people are faster if there's a label to the left or just above a form input (assuming a left-to-right page).

    Here are some articles about forms:
    Pay attention to your forms:
    http://www.uxmatters.com/mt/archives...-web-forms.php

    How your userbase expects paper forms affects how they expect online forms:
    http://www.uxmatters.com/mt/archives...lish-forms.php

    Fashionable forms, what to watch out for:
    http://www.uxmatters.com/mt/archives...s-and-tips.php

    Form actions (buttons):
    http://www.lukew.com/resources/articles/psactions.asp

    Label placement and eyes (so, not necessarily screen reader users, though this can be important for screen magnifyer users since they see only small parts of the page at a time):
    http://www.lukew.com/resources/articles/web_forms.html

    And this article by Ian Lloyd is old:
    http://articles.sitepoint.com/articl...e-online-forms
    But it's pretty good at showing how bad or no label placement can affect specifically linear-browser and screen reader users.
    Be aware that you don't have to wrap the inputs in the labels as he says: unless the Window-Eyes bug or the strange Mac bug are show-stoppers for you, you can either wrap the input in a label or keep them apart and use the [i]for[i] attribute... I do both often.

    The screen readers he's talking about in that article are quite old. Current readers have different behaviour.


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
  •