Skip to end of metadata
Go to start of metadata

WORK IN PROGRESS

Icon
 

HTML Elements Used

The following HTML elements can be used in forms:

  • <form>
  • <input>
  • <textarea>
  • <select>

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
  • Avoid JavaScript for Navigation

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.

<label>

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.

<fieldset>

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.

<optgroup>

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

http://www.webstandards.org/learn/tutorials/accessible-forms/advanced/

More

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.

BBC Guidelines

  1. Forms MUST conform to the Semantic Markup standard.
  2. Forms MUST be navigable using the keyboard.
  3. 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.
  4. You SHOULD provide input assistance to help users avoid and correct mistakes.
  5. When an input error is automatically detected, the item that is in error SHOULD be identified and the error described.
  6. 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.
  7. 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.
  8. 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" />.
  9. If there is no text that labels the form element then the element MUST have a title attribute.
  10. A label-input pair (compound element) SHOULD be contained in a block level element (e.g. <div>, <p> or <li> tag).
  11. A label-input pair SHOULD NOT be contained in a <dl>, as this provides no additional structural information.

Resources

Web form design guidelines: an eyetracking study

Label Placement in Forms

Accessible HTML/XHTML Forms

Guidelines for Designing Web Forms

FMSG Accessibility Guidelines v1.9

FMSG Semantic Mark-up v1.6

Accessible forms: Guidelines, examples and accessible JavaScript tricks.

Web and mobile form design

  • No labels

1 Comment

    • "are functionly almost identically" - change to "function almost identically" or "are functionally almost identical"
    • I would suggest that <label> MUST be used for all radio buttons and checkboxes
    • Need screenshots of each element and how it should be used and styled
    • Need recommendations of what to do with hints and tips and how to style them (e.g. on Christmas cards page)
    • I like the BBC may, must and should list, and validating data nicely

    (from Yvonne)