Category: form

Placeholder Attribute Is Not A Label!

Just so we’re all clear on this, the HTML5 placeholder attribute in a text input is not a replacement for the label element. Period. The placeholder should only be used as a brief example of the text to be entered.

Besides inconsistent support for screen readers, using a placeholder as an input label can create usability problems and issues for those with cognitive impairments. The placeholder should be used like a title attribute (tooltip); it provides only supplementary information. If the information is required for the user (such as a strict text format) then this should be conveyed in the main content of the page, not in an attribute.

The W3C HTML5 placeholder specification specifically states it should be a “short hint” and states:

The placeholder attribute should not be used as an alternative to a label.

Supporting articles:

Bonus!
On @a11yMemes, check out this humorous take on placeholder.

Addendum (more references):

Fieldsets, Legends and Screen Readers

In the article Fieldsets, Legends and Screen Readers from The Paciello Group Blog, the author Roberto Castaldo provides some excellent insight into how the screen readers JAWS and Windows Eyes work with the Fieldset and Legend tags. (Fieldset and Legend tags are used to group elements within a form.)

He concludes that support in JAWS is better overall than Windows Eyes, and that even there are issues in both screen readers, developers must continue to implement these standards tags and other accessibility practices.

Some tips from the article include:

  • Fieldset and Legend tags must be used together, never independently of each other.
  • Keep the content of the Legend tag brief (the Legend may be read when each of the controls contained in a Fieldset receive focus.)
  • In Windows Eyes, the option to read the Legend tag is off by default.
  • Fieldsets may be nested.

Podcast #51: Option Groups (OptGroup)

Option lists with many items may cause problems for users with assistive technology, such as screen readers. The solution is to use the Optgroup element to split options in the Select list into manageable groups. This also better practice for usability.

Download Web Axe Episode 51 (Option Groups [OptGroup])

WCAG 1.0 says: Guideline 2.3 Divide large blocks of information into more manageable groups where natural and appropriate. [Priority 2]

Links

Sample Code:


News

Podcast #40: About CAPTCHA and Accessibility

Accessible tableless forms

There are tables, there are forms, and there is accessibility. How should you use, or not use, these on a web page?

Download Web Axe Episode 14

Sample XHTML:






Sample CSS:
form div {
clear: left;
padding .5em 0 0;
margin: 0.5em 0px 0px;
}
form div label {
font-weight: bold;
float: left;
width: 10em;
margin-right: 1em;
}