Form Purpose
Summary
Section titled “Summary”Always start a form by making the form’s purpose clear. Knowing the purpose of a form helps to reassure people that they are in the right place and doing the right thing.
Overview
Section titled “Overview”Forms can be challenging for people with disabilities. Knowing what to expect helps to calm anxieties some people may experience when confronted with a form. To make forms as easy to understand as possible, start by having a clear purpose.
The most common methods of identifying a form’s purpose include headings, labels, and explanatory text.
- Use the heading preceding the form to provide a descriptive form name.
- Add a label in the code to programmatically associate the heading and the form.
- Include a brief explanation to provide context for the form.
Who is Helped
Section titled “Who is Helped”Making a form’s purpose clear helps:
- People with cognitive disabilities that involve memory, attention, or executive function better understand what the form is for and if they need to use it.
- People who are blind get a general understanding of what to expect before starting the form.
Guidelines
Section titled “Guidelines”- Start with a descriptive page name or section heading for the form. For short, simple forms this may be all that is needed.
- Example: If the only content on a page is a contact form, the name of the page and the level 1 heading for the page can be “Contact Us.”
- Example: If there is other content on the page in addition to the contact form, the section heading immediately preceding the form can be “Contact Us.”
- If there are multiple forms on one page, use section headings to provide a unique name for each form.
- Example: “Contact Us About Problems with Your Order” and “Contact Us About Problems with the Website.”
- Best Practice: When coding the form, use “aria-labelledby” to tie the name of the form to the form’s heading. This explicitly defines the name of the form for people using assistive technologies like screen readers.
- Example:
<h1 id=”main-heading”>Contact Us</h1><form aria-labelledby=”main-heading”> … </form>
- Example:
- Add a few sentences that make the purpose of the form clear. Make sure people understand the “why” and “what” of the form.
- Tell people why they are being asked to fill out the form.
- Tell people what will happen when they submit the form.
- Example: “Questions about our products? When you contact us, your questions are sent directly to our customer service team. We will respond to you within 24 hours.”
This example illustrates how to clearly describe a form’s purpose using the Accessible Community volunteer form.
The section heading preceding the form accurately describes its purpose.
- Volunteer at Accessible Community.
The form includes a few sentences that summarize the context so potential volunteers understand the “why” and “what” of the form.
- We are a growing international community of volunteers working together to improve our communities for people with disabilities. We are looking for individuals with passion and dedication who are willing to spend about 4 hours a week volunteering their talents. To succeed, we need a wide variety of skills. If you are interested in volunteering your time and talents, then please complete the form below.
How to Test
Section titled “How to Test”Use a visual inspection of the page in combination with an accessibility test tool like the WAVE browser extension or the ANDI bookmarklet to check a form’s purpose.
- Is the form the only content on the page?
- Use a tool like WAVE or ANDI to check that the page title and level 1 heading provide an identical descriptive name for the page and the form.
- Example:
<title>Contact Us</title>and<h1>Contact Us</h1>are the same.
- Is there other content on the page aside from the form?
- Use a tool like WAVE or ANDI to check that there is a heading immediately prior to the form that provides a descriptive name for the form.
- Ensure text has been added prior to the form that clearly conveys the form’s intent — the “why” and the “what” of the form.
- Test your choice of headings and descriptive text with people with disabilities.
- Is it clear to people why they are being asked to fill out the form?
- Is it clear to people what will happen when they submit the form?
References
Section titled “References”- W3C Web Accessibility Initiative (WAI) Forms Tutorial
- Making Content Usable for People with Cognitive and Learning Disabilities - Objective 1: Help Users Understand What Things are and How to Use Them
- WCAG 2.1, Success Criterion 2.4.6 Headings and Labels, Level AA (W3C)
- WCAG 2.1, Success Criterion 4.1.2 Name, Role, Value, Level A (W3C)