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 or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Wheelchair access ramp

HTML Forms: Input Accessibility

html / forms

Estimated reading time: 1 minute, 21 seconds

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 a label to the appropriate form element, meaning that a user can click on the for to make the appropriate <input> active, rather than having to guide the mouse and click (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:

<label for=city>City</label>
<input type="text" name="city" id="city">

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

<label for=city>City
<input type="text" name="city" id="city">

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. 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">
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.