HTML Elements Used
The following HTML elements can be used in forms:
These elements are rendered and function almost identically on different (GUI-based) browsers.
Basics of Layout
There are some well recognised HCI principles with forms that help make them more easy to use.
Some adaptive technologies, such as screen readers, follow those principles when
interpreting a page that contains a form.
e.g. if they encounter a text input they expect that the text related to it comes before that input.
If a screen reader sees something like this it has difficulty:
It may incorrectly associate the second input with the first line of text, as if you had this:
For some inputs this is actually the correct way of doing things in order for text to line up, otherwise:
By following the below guidelines your forms will automatically become more accessible because this is how assistive devices expect them to be set out.
|HTML Element and type||Order of Appearance||Example|
|input type="text"||Descriptive label, HTML element|
|input type="password"||Descriptive label, HTML element Y|
|input type="button"||Not applicable (value attribute used instead)|
|input type="submit"||Not applicable (value attribute used instead)|
|input type="radio"||HTML element, Descriptive label|
|input type="checkbox"||HTML element, Descriptive label|
|select||Descriptive label, HTML element|
|textarea||Descriptive label, HTML element|
|button||Not applicable (value attribute used instead)|
- Ensure that your form works with scripting disabled - some assistive devices do not support scripts at all
Accessible HTML/XHTML Forms
There are some specific elements that can be added to forms that will go even further in insuring that pages are usable and accessible by the widest possible audience.
It is important not to split form titles from the form inputs for screen readers. The label tag grants some level of grace. The label uniquely links the description to the form input, providing the id is distinct and the HTML is valid.
An additional benefit is that a user can click the description which will work the same as if the user clicked the input. This is particularly useful for radio and check boxes. Label can be applied to all form inputs with the exception of buttons.
The fieldset tag allows you to naturally group a number of inputs and when coupled with legend will provide a visual grouping. Support from assistive devices is limited so it is of more benefit to sighted users or those with cognitive difficulties.
Note that the fieldset can be used to group together any variety of form input elements ¿ not just groups of the same type.
The optgroup tag allows you to logically group a number of options within a single input.
Please note the label attribute within optgroup is distinct from the label tag.
Advanced Accessible HTML/XHTML Forms
Following some simple guidelines when Designing Web Forms will make forms more user friendly and be easier to develop and maintain.
Plan First, Design Second
Review questions before creating any mockups or designs.
- What unmet need(s) will the form fulfill?
- What does the user want to accomplish when using this form?
- Exactly what information needs to be collected to meet these needs?
- What types of browsers does the target audience use?
- What's the target audience's level of experience using Web forms?
Explain and Reassure
Provide key information to the user before they fill out the form.
- What the user can accomplish
- What information is required
- How the information will be used
- How long it will take to fill out the form
- What the user can expect in return
Collect Data Efficiently
This section discusses the use of form elements to allow the user to complete the form as quickly and easily as possible. You'll read about grouping elements logically, using single- and multiple-page forms, eliminating retyping, prefilling predictable answers, and validating data on the client side.
Functional Forms with Visual Appeal
The visual layout of a form is a big factor in how effective it will be. This section takes a look at a number of issues related to form elements: grouping, placement, spacing, and tab order. We'll also look at how to use a progress indicator.
Validating Data Nicely
Users will make mistakes when filling out a form; it's just human nature. This section provides examples of common error messages and tells how you can improve those so that you don't unintentionally upset your customers.
After the Form Is Complete
After the Submit button is clicked, you'll want to present the user with some type of message¿sometimes more than that. This section discusses that what you say after the form is complete.
- Forms MUST conform to the Semantic Markup standard.
- Forms MUST be navigable using the keyboard.
- You MUST provide a `submit¿ button for all forms. You MAY use an image to perform this function but if you do you MUST provide alt text for this image.
- You SHOULD provide input assistance to help users avoid and correct mistakes.
- When an input error is automatically detected, the item that is in error SHOULD be identified and the error described.
- When an input error is automatically detected and suggestions for correction are known, then the suggestions SHOULD be provided to the user UNLESS it would jeopardize the security or purpose of the content.
- For compound elements (where text is used to label a form element), the <label> tag MUST be used to explicitly associate the relevant text label with its form element.
- This MUST be done using a 'for' attribute on the label and a pairing 'id' attribute on the element.
e.g. <label for="apple">apple</label><input id="apple" />.
- If there is no text that labels the form element then the element MUST have a title attribute.
- A label-input pair (compound element) SHOULD be contained in a block level element (e.g. <div>, <p> or <li> tag).
- A label-input pair SHOULD NOT be contained in a <dl>, as this provides no additional structural information.