At some point or another we all need to collect information from our web users. A simple solution is to create a form. However, creating a usable and accessible form is not always as easy as it seems.
Use these tips to help jumpstart your next form project.
Draft and Plan
It’s tempting to jump right into the design phase of form development but we highly recommend spending the bulk of your time in the Draft and Plan phase. This is the phase where you gather all the information you need for your form.
Having a solid foundation for your form helps you to move through the following phases with fewer errors or accessibility concerns.
In the Draft and Plan phase, focus on maintaining a clear purpose, using plain language, organizing your content from general to specific, and identifying the right university-supported forms platform for sharing your form.
Maintain a Clear Purpose
While you are in the Draft and Plan phase it’s essential to maintain a clear purpose on why you need this form. Ask yourself the following questions:
- Why am I asking someone to complete the form?
- What will we accomplish with the submitted information?
Knowing the answers to these questions will help you articulate the purpose to your audience and also gather the information you need to accomplish your tasks.
Pro Tip: Don’t gather more information than needed (especially identifying information)
Use Plain Language
The Plain Language Writing Act of 2010 defines plain language as “Writing that is clear, concise, well-organized, and follows other best practices appropriate to the subject or field and intended audience” (What is Plain Language?)
Here are some tips to keep in mind:
- Avoid using “big” words or words with multiple meanings
- Use terms consistently (consider the audience and the context)
- Be specific
- Ask for one bite of information in each question (avoid “and” “or”)
- Give suggestions when applicable (get people thinking)
Organize from General to Specific
As you develop the questions and content for your form, think about using a general to specific organizational pattern. This helps users move through the form more easily.
Consider the following sections for form content:
- Identifying information – what do we need to know about the individual’s identity?
- Orienting information – general information that relates to the specific context and moves the participant to consider the subject of the form.
- Specific information – details information about the subject and the purpose of the form.
Identify Your Platform
There are several options available to produce and publish your form. Each has pros and cons for usability and accessibility.
The main thing you need to decide is if you are using a PDF or HTML format.
PDF Forms
PDF forms are an option for collecting form content but should be reserved specifically for printed documents. A digital PDF form presents several barriers for both creators and your audience.
- For the creator – designing and formatting can be quite challenging and time-consuming to meet accessibility requirements. It also requires specific software and manual testing to achieve accessibility compliance.
- For your audience – a PDF may be completely unusable as well as inaccessible for people of all abilities. And, even if it is accessible, the PDF may present other barriers that prevent users from taking action in a timely manner.
HTML Forms
HTML or “web” forms are often easier to design and make accessible for content creators. As a result, they are often easier to access and use by your audience on a variety of devices and browsers. This can eliminate many of the barriers present in the PDF format.
For more information about the tools available for HTML forms see University Form Solutions.
Design and Test
Once you are done planning your form content, you can next move on to the Design and Test phase.
Design
Using the information from the Draft and Plan phase as a guide, start adding questions to the platform you identified. As you design, keep the following in mind:
- Each form field requires a descriptive label
- Where necessary, provide field descriptions or help text to aid users in their responses, such as what format is required for an entry or examples of what you’re looking for
- Use section headings to break up content into logical sections
Test
Each form, regardless of format, requires automatic and manual accessibility testing to ensure compliance with University Policy 8140: IT Accessibility.
- Automatic Testing – On the web, browser extensions or accessibility scanners can help you identify automatic accessibility errors in HTML forms. For PDF forms, accessibility scanners built into Adobe Acrobat Pro can help you identify and resolve issues.
- Manual Testing – You can manually test forms by tabbing through the content with your keyboard to ensure all form fields can be reached without a mouse. Listening to the form with a screen reader can also verify the form field labels and descriptions are read out correctly and in a logical order. Viewing the form on multiple devices can also help identify areas of concern.
Contact the Help Desk for our Accessibility Team to assist you with automatic and manual testing workflows and resources.
Deploy and Monitor
After designing your form and testing for accessibility compliance, you can move to the final phase: Deploy and Monitor.
Deploy
For HTML forms you can embed the form on a WordPress page. Your page should have the following information above the embedded form:
- A descriptive page title
- A brief introduction to explain the purpose of the form and what the user needs to successfully complete the form (types of content, any additional documents, etc.)
- Contact information for assistance or questions
- If necessary, an accessibility statement that provides information users need to complete the form with specific assistive technology or details about any known accessibility issues (contact the Help Desk to ask our Accessibility Team to provide you with a statement for your form)
PDF forms can’t be embedded on a webpage, but it is best-practice to have a dedicated webpage with the same information that is in the PDF displaying as an HTML form. Instead of embedding the PDF, clearly label the hyperlink as a downloadable PDF.
Monitor
After your form is live, monitor how people are interacting with your form.
Are they submitting the correct information? Are you getting questions about how to find or complete the form? Do you need to collect additional or different information? These are all questions that you can use to update and revise the form to be more usable for your users and to help you accomplish your goals.
If you identify an area for improvement you can revise as needed using the same phases and steps outlined in this article.
Questions?
If you have questions about creating or updating a form, we’re here to help!
- Review Using WordPress: Forms and Using WordPress: Documents for more tips and tricks for creating accessible HTML forms
- Explore our Web Accessibility resources available on Webguide to learn more about web accessibility
- Contact the Web Accessibility Team with questions at OITAccessibility@BoiseState.edu