Accessible Forms

When you create a form for your website, you need to keep in mind that not everyone will be able to see them, and not everyone will be able to use a mouse to fill them in. For those who can see and use a mouse, they may have poor motor control, finding it difficult to click on small checkboxes and radio buttons.

Some companies have been sued over the fact that people with certain disabilities are unable to use their forms, when it’s very easy to create a form that they can use. If you’re not concerned with legal repercussions, then you should at least consider how many potential customers you will be missing out on if people can’t order your product, subscribe to your newsletter, or send you an email.

I will cover styling forms elsewhere. First, it’s important to know how to make your forms functional for as many people as possible.

XHTML tags that are specific to forms are:

<form>
<fieldset>
<legend>
<label>
<textarea>
<input>
<select>
<optgroup>
<option>
<button>

In this tutorial, I will cover the first 6 listed above, and will cover select boxes (which include select, optgroup, and option) in a separate tutorial. The <button> tag is pretty much useless because different browsers interpret it differently, so I won’t even go there. Instead of the <button> tag, you should use <input>.

This tutorial focuses on making your forms usable by the most people possible, not on actually making them work. For that, I will create another tutorial in the future.

Ready? Let’s go!

<form>

Every form needs to be started with a <form> tag, such as this one:

<form action="/subscribe.php" method="post">

The “action” attribute will take users to the page where the script will be executed, while the “method” attribute specifies how the information submitted through the form should be handled. Neither of these things have to do with accessibility and will be covered in the PHP category, but I wanted to give you an example of a properly written <form> tag here.

After all of your form elements, you will need to end your form with </form>.

<fieldset>

The <fieldset> tag groups related form elements together. For example:

To do this, you would start each section with <fieldset> and finish each section with </fieldset>.

Now, to explain the headings for each of these sections…

<legend>

This is how the above form was created.

<form form attributes here>
<fieldset><legend>Required information</legend>
<label for="name">Name:</label> <input type="text" id="name" size="20" /><br />
<label for="email">Email:</label> <input type="text" id="email" size="20" />
</fieldset>
<fieldset><legend>Optional information</legend>
<label for="referred">How did you hear about us?</label>
<input type="text" id="referred" size="20" />
</fieldset>
<input type="submit" value="Submit" />
</form>

Notice that each section is surrounded by <fieldset></fieldset> tags, with each section heading surrounded by <legend></legend> tags as the first thing within the fieldset. This will clearly label each section for sighted and visually-impaired users alike.

<label>

Note the use of <label> tags in the above code, then click on the text within the form below:

Using <label> tags in this way will associate the text with its corresponding form element. It comes in especially handy when someone with poor motor skills is trying to mark a checkbox or radio button, and it also provides a clue to aural screen readers so they will read the form out loud correctly.

But how does it associate the text with the form element, you ask? It matches up the “for” attribute in the <label> tag with the “id” attribute in the <input> or other tag. Let’s look at one of those lines, but with the relevant part highlighted:

<label for="name">Name:</label> <input type="text" id="name" size="20" /><br />

<textarea>

It is appropriate to use a textarea when information is being asked for that may require multiple lines.

The XHTML for that, with its corresponding <label> tag:

<label for="extra_info">Please tell us a little about yourself.</label><br />
<textarea id="extra_info" rows="5" cols="50">Where you grew up, what you do for a living, etc.</textarea>

If you don’t want any text within the textarea by default, then don’t add it. If you would like some text there but are afraid mouse users will be annoyed with having to remove that text, you can use javascript to automatically remove (or just highlight) that text when the textarea is clicked on. If someone is using the tab key to navigate, this text will automatically be highlighted, and anything that’s typed at that point will replace the text that was there.

Notice that it also has attributes named “rows” and “cols”. These define the width and height of the box. Now, you might be asking why I would define the width and height this way and not through CSS, since CSS is always, always, always the proper way to style something.

However, defining the width and height here isn’t for styling purposes, it’s for accessibility. If someone is using a browser that isn’t CSS-enabled, they will need the box to be big enough to see what they are entering. Further, if you don’t have these two attributes in there, it won’t validate (hit your browser’s back button to return to this page, or use your shift key while clicking to make that link open in a new tab or window).

Of course, you can still define the width and height of textareas in your CSS, and this will override the rows and cols attributes.

<input>

<input> is the most commonly used tag in (x)HTML forms and is used for text boxes, checkboxes, radio buttons, hidden values, submit/reset buttons, and a few other things.

Please go to the next page to learn about <input> tags…

This post has multiple pages. Go to page: 1 2 3

If you found this article useful, please spread the word: