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

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:

How your userbase expects paper forms affects how they expect online forms:

Fashionable forms, what to watch out for:
http://www.uxmatters.com/mt/archives/2010/11/fashionable-web-forms-traps-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/article/accessible-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.