Making the Guest Book Accessible

Rootswe/Ancestry no longer supports the Guestbook feature.

If you could not see the form below, how would you make the connection between the form element and its text label without the visual clues of either proximity or grouping?

What is the Form Element?  It's the section of the HTML document that may contain normal content, some markup, controls (or html element such as checkboxes, radio buttons, text fields, etc.) and labels on those controls.

Label

The label element is a special element applied to a form element to allow its textual description to be semantically linked to the element itself.  Any assistive technology such as a screenreader can read out that text when it encounters its partner form element. To use a label, wrap the textual description in a pair of label tags, then add a for attribute to the label. The value of the for attribute should be the id of the form element with which you want to create a connection:

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

When the screenreader encounters the name field, it will read out the text "Name" to the user so he/she knows what to type into that field. It does not matter what order they are in but the label and for attribute must contain a valid reference so the relationship is understood.

A label should be applied to any form element that doesn't automatically include descriptive text, such as:

  • checkboxes
  • radio buttons
  • textareas
  • text fields
  • select boxes

Submit buttons and submit images don't require label elements, because their descriptions are contained, respectively, in their value and alt attributes.

Fieldset and Legend

A fieldset groups a series of related form elements.

For instance: "name" "email" "personal1" "personal2" and "personal3" could all be grouped under "My Details" Use fieldset to group all of the elements together and legend  to describe the group.

Now that legend is associated with all of the form elements inside the fieldset, when a person using a screenreader focuses on one of the form elements, the screenreader will also read out the legend text: "My Details; Name."

Setting the Tab Order

Create a logical tab order through links, form controls, and objects. For example, in HTML, specify tab order via the "tabindex" attribute or ensure a logical page design". Web Content Accessibility Guideline Checkpoint 9.4

With Web forms, tabindex can be applied to all the input elements such as buttons, checkboxes and text areas. Pressing the tab key will move the focus to the next element, for example tabbing through a form with a number of input boxes will place the cursor at the beginning of each box in the order determined by the tabindex for each box.

Form Layout

There are, of course, several ways to layout your form.

It's generally considered most efficient to have one form element per line, with the lines stacked sequentially one on top of the other, as most Western-language web pages are designed to scroll vertically rather than horizontally. This allows users to follow the path to completion easily and focus their attention on entering one piece of data at a time.  ~ from Sitepoint ~

For each form element in a left-to-right reading system, it's logical to position the corresponding label in one of three ways:

  • directly above the form element
  • in a separate left column, left-aligned
  • in a separate left column, right-aligned

Styling the Form

You can create the layout for your form and change the "look" or presentation of the form by changing the CSS applied to the elements. You can read more about the various style rules for the form in Fancy Form Design Using CSS by Cameron Adams.

The Guestbook

Guestbook that can be validated for accessibility. This is an off-site link so that the Rootsweb banners will not interfere.

My Details
My Comments

View Guestbook

Resources on Accessible Forms