pennypacker.net: Bulletproof Web Forms Part Two: Accessibility

Bulletproof Web Forms Part Two: Accessibility

Now that we've roughed out the content and have written the preliminary mark-up, it's time to take a look at accessibility. Accessibility is an often overlooked aspect of web design that has many benefits. Outlining those benefits, however, is beyond the scope of this article. Suffice it say that it will allow users on any web browser to use your site more easily. If your user is browsing with a screen-reader, text-only browser, a cellphone, or a desktop browser like Firefox, adding accessibility features will make your form more user-friendly.

Explicit label

You will have noticed that I've used the <label> elements to wrap their respective <input> elements. The W3C identifies two different types of labels: Implicit and Explicit. Basically, the difference is that implicit labels are an older, deprecated technique that wrap around their target field elements; explicit labels use the for attribute to indicate which form element they describe (that value of the for attribute is the id of the element it describes. The two techniques are not mutually exclusive, and we are using both techniques at the same time to satisfy modern and legacy browsers.

A neat thing about a <label> is that it really improves accessibility for users that prefer a pointing device like a mouse. Simply clicking on the label puts the cursor focus on its associated element in browsers that support it.

Next, please

For those who don't know what tabindex is, it's an attribute that can be applied to almost any XHTML element, and it accepts a numeric value (between 0 and 32767). This value tells the browser which elements to focus on when the user presses the tab key. Similarly, it tells the browser in which order to give focus. You can specify a tabindex of "1" to the element you want to highlight first, "2" for the next element, and so on. Once the end of the tabindex is reached, the browser will loop through the links on the page until finally starting over again at the first tabindex. Some browsers by default tab through each link on a page, so it's a good idea to use a tabindex on our form to give the user a direct way to the meat of the form.

At the touch of a button

Similar to tabindex is a feature of XHTML called the accesskey attribute. These are keyboard equivalents for clickable regions to allow your form to be navigated easily without a pointer device. The accesskey attribute is set to a single character, and it's perfectly fine to use a period, comma or other symbol. There is no standard way to tell the user what keys do what, though there have been articles written on the topic.

The accesskey is placed on the <label> element. There is a good reason for this. When the user activates the keyboard shortcut to get to a <input> element, it's ideal that they actually be taken to the text that describes the <input> element. Imagine not seeing the page, but listening to someone read it. Would you want to be taken directly to an <input> element, or would you rather be told what the element is for? Definitely the latter. For visual users, the label will provide a larger click area to access the form widget. Strangely enough, XHTML requires tabindex be placed on the input elements themselves and not on the <label>. I would think that they logically belong on the label, perhaps it's an oversight on the part of the W3.

Every technique uses an extra something.

I've made a concession in terms of mark-up, and the reason for it will become evident in the next part when we apply CSS to our form. I've added an extra span to wrap the label text. <span> is semantically meaningless, so don't worry about its impact on the content, and the few extra bytes of space it takes is well worth it once we flex our CSS muscle.

Let's take a look at our finished mark-up:

<form action="" method="post">
<fieldset>
<legend><a name="whoareyou" id="whoareyou"></a>Who are you?</legend>
<label for="name" accesskey="n"><span>Name:</span><em>Required</em>
<input type="text" name="name" id="name" tabindex="1" /></label>
<label for="email" accesskey="e"><span>Email:</span><em>Required</em>
<input type="text" name="email" id="email" tabindex="2" /></label>
<label for="website" accesskey="w"><span>Web Site:</span>
<input type="text" name="website" id="website" tabindex="3" /></label>
<label for="comment" accesskey="c"><span>Your Comment:</span><em>Required</em>
<textarea name="comment" id="comment" rows="5" cols="10" tabindex="4"></textarea></label>
<label for="check" accesskey="d"><span>Do you like checkboxes?</span>
<input type="checkbox" name="check" id="check" tabindex="5" /></label>
</fieldset>

<fieldset>
<legend><a name="aboutyou" id="aboutyou"></a>Tell us about yourself</legend>
<label for="choose" accesskey="p"><span>What is your favorite primary color?</span>
<select name="choose" id="choose" tabindex="6">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
</select></label>

<h4>How did you find out about this form?</h4>
<label for="searchengine" accesskey="g"><span>Search Engine</span>
<input type="radio" name="how" id="searchengine" tabindex="7" /></label>
<label for="friend" accesskey="f"><span>Friend</span>
<input type="radio" name="how" id="friend" tabindex="8" /></label>
<label for="dunno" accesskey="k"><span>I don't remember</span>
<input type="radio" name="how" id="dunno" tabindex="9" /></label>

<input type="submit" name="submit" id="submit" value="submit" tabindex="10" accesskey="s" />
</fieldset>
</form>

See the example page.

That's it for the mark-up. Our form is well written, accessible, and it meets WCAG guidelines. It's a little ugly by itself, but it's just the content without style, it's not meant to be pretty yet. So let's get to style and some CSS.

under:

Web Development

Posted on

2006-04-03