demosthenes.info

A blog by Dudley Storey on , , , , , , and anything else that strikes his fancy.

featured articles

popular favourites

HTML Forms: Input Accessibility

“Accessibility” is a catch-all phrase for the concept of making web content as usable as possible for people of differing abilities. It is the equivalent of putting a wheelchair access ramp on the front of a building and braille on elevator buttons. While it is not yet legally required in Canada (as of this writing) the principles of accessibility are strongly advised as “best practices”, and make your site easier to use as a whole for everyone.

The fact that we have been using clear, semantic HTML fulfills a big part of the guidelines of accessibility. In the context of forms, there are two other attributes we should add to our <label> tag:

The first is the for attribute. Used correctly, for “links” the label it is used inside of to the appropriate input, meaning that a user can click on the label to make the input active, rather than having to guide the mouse cursor inside the input box (useful for site users with diminished hand-eye co-ordination, for example). for takes the value of whatever id is set to in the appropriate form element:

  1. <label for=“city”>City</label>
  2. <input type=“text” name=“city” id=“city” size=“32” maxlength=“30” />

The second attribute is accesskey. This creates a keyboard shortcut so that users with disabled access can hit a key, rather than using the mouse (for our purposes, the keyboard equivalent is alt-shift-accesskey.) It is usually (but not always) the first letter in the label content, and must be unique to each element in a form:

<label for=“city” accesskey=“c”>City</label><input type=“text” name=“city” id=“city” size=“32” maxlength=“30” />

web developer guide

featured comment

by JoelB in Goodbye, JQuery Validation: HTML5 Form Errors With CSS3

what i'm reading

A Storm of Swords: A Song of Ice and Fire: Book Three
A Storm of Swords: A Song of Ice and Fire: Book Three

what i'm watching

Californication: The Third Season
Californication: The Third Season

what i'm playing

Mass Effect 3 Collector's Edition
Mass Effect 3 Collector's Edition

what i'm hearing

Dub FX
Dub FX

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.