Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

55 lines (37 sloc) 3.669 kB
title tutorial_title order topic_order wcag_success_criteria type first_published editors contributors support
Forms Concepts
Forms
1
3
1.3.1
2.4.6
3.3.2
4.1.2
intro
September 2014
The Web Content Accessibility Guidelines Working Group (WCAG WG)
the Education and Outreach Working Group (EOWG)
Developed with support from the WAI-ACT project, co-funded by the European Commission IST Programme.

Forms are commonly used to provide user interaction in websites and web applications. For example, login, registering, commenting, and purchasing. This tutorial shows you how to create accessible forms. The same concepts apply to all forms, whether they are processed client or server-side.

Aside from technical considerations, users usually prefer simple and short forms. Only ask users to enter what is required to complete the transaction or process; if irrelevant or excessive data is requested, users are more likely to abandon the form.

  • Labeling Controls: Use the <label> element, and, in specific cases, other mechanisms (e.g. WAI-ARIA, title attribute etc.), to identify each form control.

  • Grouping Controls: Use the <fieldset> and <legend> elements to group and associate related form controls.

  • Form Instructions: Provide instructions to help users understand how to complete the form and individual form controls.

  • Validating Input: Validate input provided by the user, and provide options to undo changes and confirm data entry.

  • User Notifications: Notify users about successful task completion, any errors, and provide instructions to help them correct mistakes.

  • Multi-Page Forms: Divide long forms into multiple smaller forms that constitute a series of logical steps or stages, and inform users about their progress.

  • Custom Controls: Use stylized form elements and other progressive enhancement techniques to provide custom controls.

A note on time limits

If possible, forms should not be subject to a time limit to allow users to complete the form at their own pace. If a time limit needs to be in place, for example, for security reasons, the user should have the option to turn it off or extend it. This does not apply if the time limit is due to a live event, such as an auction or a game, or if the time to complete the form is essential for a valid submission.

Why is this important?

Forms can be visually and cognitively complex and difficult to use. Accessible forms are easier to use for everyone, including people with disabilities.

  • People with cognitive disabilities can better understand the form and how to complete it, as making forms accessible improves the layout structure, instructions, and feedback.

  • People using speech input can use the labels via voice commands to activate controls and move the focus to the fields that they need to complete.

  • People with limited dexterity benefit from large clickable areas that include the labels, especially for smaller controls, such as radio buttons and checkboxes.

  • People using screen readers can identify and understand form controls more easily because they are associated with labels, field sets, and other structural elements.

Jump to Line
Something went wrong with that request. Please try again.