demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter.

featured articles

popular favourites

Wheelchair access ramp

HTML Forms: Input Accessibility

is the concept of making the world as usable as possible for people of differing abilities. You see examples of accessibility every day: wheelchair access ramps on stairs, or braille on elevator buttons. While it is not yet legally required in most counties for websites, the principles of accessibility are strongly advised as best practices. Used well, accessibility makes your site easier to use for everyone.

The fact that we have been using clear, semantic 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 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 />

Alternatively, you can wrap the input with the label; if you do so, you can drop the for attribute:

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

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:

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

You must be signed up in order to leave comments.

web developer guide

featured comment

by Aisling Brock in New Business Card Design

what i'm reading

A Feast for Crows: A Song of Ice and Fire: Book Four
A Feast for Crows: A Song of Ice and Fire: Book Four

what i'm watching

Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]
Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]

what i'm playing

Borderlands
Borderlands

what i'm hearing

Planets
Planets

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.