design forms html5 label

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. For example, how does one review the information entered if the placeholder is now gone?

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…intended to aid the user with data entry” and also states:

The placeholder attribute should not be used as a replacement for a label.

Supporting articles:

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

Addendum (more references):

Also see Web Axe follow-up post: Floated Labels Still Suck.

Related Tweet Jan 2016:

forms screenreader

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.
forms lists option podcast

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]


Sample Code:


captcha forms web

Podcast #40: About CAPTCHA and Accessibility

Dennis and Ross discuss different methods of implementing CAPTCHA on the web and how to make it accessible.

Download Web Axe Episode 40 (About CAPTCHA and Accessibility)

CAPTCHA Services



forms podcast table web

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;