Website accessibility Hints and Tips

Form design

Filling in forms is a key part of the recruitment process - inaccessible forms make this unnecessarily complex and frustrating for screen reader users

For accessibility you need to

• Label forms for accessibility using the label attribute so screen readers can orientate around forms
• Position labels properly to maximize usability
• Think about form validation - provide alternatives to the standard JavaScript validation

A simple example is given below of how to accessibly code all the various form input elements: Note the value of the "for" attribute must be the same as the value of the "id" attribute.

<FORM>
<LABEL for="name">Name:</LABEL>
<INPUT type="text" id="name" SIZE="50">
<LEGEND>Sex</LEGEND>
<INPUT TYPE="radio" name="sex" id="male">
<LABEL FOR="male">Male</LABEL>
<INPUT TYPE="radio" name="sex" id="female">
<LABEL FOR="female">Female</LABEL>

<LABEL FOR="employ">Employment type:</LABEL>
<SELECT NAME="type" id="employ">
<OPTION>Permanent</OPTION>
<OPTION>Part time</OPTION>
<OPTION>Temporary</OPTION>
</SELECT>

<LABEL FOR="com"> Comments:</LABEL><BR>
<TEXTAREA ROWS=10 COLS=30 ID="com"></TEXTAREA> <BR>
<INPUT TYPE="submit"> <INPUT TYPE="reset">
</FORM>

Laying Out Complex Forms

For more complex forms, it is important to group related areas together. This is done using the fieldset element. In the example below, this is used to help group all of the contact information collected on a form.

Visually, fieldset has the effect of drawing a bounding box around the group. Notice the faint line around the form area listed below.

The fieldset element is frequently used with the legend element. The legend element identifies the heading for that group of elements on the form. In the example above, the legend is 'Contact Information'

The code for the example above is listed below.

<form>
<fieldset>
<legend>Contact Information</legend>
<p>
<label for="first_name">First Name:</label><br>
<input type="text" name="first_name" id="first_name">
</p>
<p> <label for="last_name">Last Name:</label><br>> <input type="text" name="last_name" id="last_name">
</p>
<p> <label for="email">E-mail Address:</label><br>
<input type="text" name="email" id="email">
</p>
</fieldset> </form>

Form Validation

Information validation is a major accessibility issue because often a scripting language called JavaScript is used. It is a problem because JavaScript does not work well with screen readers. In reality this can mean that screen reader users can fill in the form successfully, but when they come to select the submit button nothing will happen because their software does not support JavaScript. The solution is to either 'redirect' the screen reader user to alternative form which does not use JavaScript, or to completely overhaul your form validation using an accessible (server-side) scripting language such as ASP, PHP or JSP.

To provide an alternative version of a form for screen reader users a hidden link can be placed at the top of the form attached to an invisible single pixel gif.

---