First time visitor? The tutorials start here.

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:

Required information
 
 
Optional information
 

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. Note: Where it says form attributes here, this would be replaced by actual attributes, which isn’t covered in this article.

<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:

Required information
Optional information

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:
Stumble it! Digg! Tweet it!



Comments (7)

jadegreenSeptember 24th, 2010 at 12:48 pm

Great post! Thanks for sharing!

LesaSeptember 24th, 2010 at 2:07 pm

You’re welcome, jadegreen. Thank you for your comment. 🙂

bchitalaJanuary 11th, 2011 at 12:54 am

Hi Lesa,
I want to know what coding is involved if you just want a portion of a story to be read on one page and the remainder of the paragraphs to be read on another page (i.e. “Read More…”). Do you have to create a new page and how do you link it up with the main page since it’s not on the main navigation link? Could you please give me an example of both the HTML and CSS codes to use. This Much appreciated.

bchitalaJanuary 17th, 2011 at 11:28 pm

CAn anyone advise what code I can implement if I want my web siteto be able to truncate paragraph or news items and direct the reader to “Read more…” Also how can I code to “Archive” new/stories? Any help wil be appreciated. Thanks all.

LesaJanuary 18th, 2011 at 4:28 pm

Sorry I missed your question before, bchitala.

Are you using WordPress? WordPress does this automatically.

bchitalaJanuary 31st, 2011 at 11:59 pm

Hi Lesa. No I’m not using WordPress. I have never tried WordPress at all. I’m just learning how to design a website from scratch. Right now I’m doing a lot of reading but can’t figure out how truncating stories is coded. thanks for getting back to me.

LesaFebruary 1st, 2011 at 12:30 pm

You’re welcome, bchitala. Sorry it took me a few days to know you had posted.

What you’re describing is done with a content management system (CMS) that uses server-side programming and a database, which WordPress will easily manage for you. While I do have one PHP tutorial here and plan to add more in the future, building a proper CMS from scratch is far more extensive than including a few files or creating a mail form, and requires extensive knowledge of 4 different languages: PHP, MySQL, (x)HTML, and CSS.

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.