These extra notes are designed to help you improve the reliability and usability of your forms. This will enable disabled users to complete your forms as easily as other users.

Improving Forms

Providing additional guidance for input fields

If you need to include additional advice to help the user complete an input field correctly this advice needs to be written in the HTML before the user reaches the actual field.

<label for="email">Your e-Mail address - </label>
<span id=”helptext1”>(Please provide a valid email address)</span>
<input type="text" name="email" id="email" /> </p>

(Please provide a valid email address)

We can then use CSS to position the help text to the right of the email input box for visual users.

<style type="text/css> .helptext {position:absolute; right:25em; } </style>

The result now is that the "help text" is sent off to the right of the input field (25 characters from where it was), whilst the input field slides in to fill the space left. Screen readers and text only browsers will still read the help text before the user enters the input box. The result for visual users is shown below.

(Please provide a valid email address)

You can add further styles to the help text to make it more noticeable to visual users.

Providing even more detailed information

Sometimes you may want to add extra supporting informationIf you have a form that might be used quite often by the same people, but want to add detailed information for first time users

Formatting input field text

When your visitor types text into an input field they need to be able to see what they have written so they can check spelling etc. Input fields are elements (blocks) just like the <p> element, so they need to be specifically formatted in the stylesheet. If you do not specify a font-face or font-size for input fields the default setting of the <body> tag will be used. We recommend that you always define fonts and colours for the input element. To help make the input stand out from the main page content we suggest that input fonts should be slightly larger than the currently declared font face (e.g. 1.2em). Type something in the input (email) field above and then type something into the box below and see if it is easier to read when it is made slightly larger..

You can format input fields just like any other block element, but don't get too carried away. If the input boxes are too noticeably different to the overall form design users can become distracted and not read the field label instructions properly.

Providing alt tags for submit buttons

The "Submit" and "Reset" buttons are usually coded with a "value" attribute that is displayed on the button as displayed below.

-

It is a good idea to use a slightly more meaningful values for these buttons such as "Press to submit this form" and "Press to clear the form and start again". The style of the button can be redesigned with CSS, or even use specially designed images. If you do not use the standard buttons as shown above it may be necessary to provide an alternative text tag to replace the "value" attribute. You can technically add an alternative text tag to a standard button, but blind people may hear both the value and the alternative text read out which can be confusing, so only provide the alt tag if you have not used the value attribute to display a text message on the button.

 

Tab index

Selectable HTML elements such as links and form fields can include the tabindex attribute. This attribute controls the order in which the elements are selected by keyboard users. It has no effect for mouse users. If the HTML has been written in a logical order there is no need to use the tabindex attribute as the user will follow a logical path without it. In fact the tabindex attribute can cause real frustration for disabled users if it is not implemented correctly. The tabindex attribute takes control of events away from the user and can leave the user not knowing where the current focus is. We therefore recommend that you do not use the tabindex attribute.

Using the server to validate the form

If your server runs an application such as PHP, ColdFusion or ASP you can design a method that automatically checks that the input is what you expect. For example you can check if any fields are empty, or if an email field includes at least one @ sign. You can then write a programmable script that designs a new page for the user that identifies any potential errors. It is important that you design a system that clearly identifies what the errors were, where they were and how you think the user should correct them. Please do not rely on statements such as "the items in red need attention" or "You have not completed all the fields". Please try to be specific about your instructions by using phrases such as "Please provide a valid email address in the third field" so that the user knows where to go and how to make the correction.

Using java to validate form

If you do not have access to a webserver that runs applications such as PHP or APS.NET then it is possible to use some javascripts to check that a form has been completed before submission. This is not a very reliable solution as some assistive software does still not work with javascripts.

Any reputable hosting service will provide PHP or similar as part of their standard package, or allow an upgrade for a small fee. Our recommendation is to use one of these server-based programmes instead of javascripts for form validation.

USING TABLES TO LAYOUT FORM FIELDS

If you have to use a table to layout the form on the page it is vital that the field label is either in the same cell as the input field, or in the adjacent preceding cell.

This is correctThis is wrongThis is correct
First Name input box
Last Name input box
First Name Last Name
input box input box

First Name
input box

Last Name
input box

In the second (middle) example there is no logical connection between the label and the input field which the screen reader can identify. Whilst using the <label> element here would help most assistive software some basic screen readers would still follow the table format, plus the code is harder to maintain as the relevant inputs do not follow immediately after the label.


Lesson Summary

This lesson has looked at how to create accessible forms

  1. Design forms to only obtain the information you really need
  2. Arrange the form fields in a logical order
  3. Position meaningful labels before input fields
  4. Use CSS to position radiobuttons and checkboxes visually if you want them to appear to the left of their label
  5. Use the fieldset element to group together related input fields
  6. Use a server to validate form input and provide meaningful guidance to the user for error correction
  7. Use CSS to format input fields so that user input is clear
  8. If possible avoid using the select element
  9. If possible avoid using the tabindex element
  10. If possible avoid using javascript to validate forms
  11. If you use a table to layout your form, make sure it makes sense when read cell-by-cell.