Web forms should be easy to navigate, complete, and submit while being keyboard accessible from the first input field to the submit button. Instructions, input format requirements, and error messages should be written in plain language and intuitive and descriptive.
Here are just a few ways to get you started toward creating a form that is all of the above.
Keyboard Accessible
You can test this the same way you would test a webpage. Tab through the form ensuring that 1) focus is visible and 2) that you have a logical tab order. The default tab order is the order in which the elements appear in the source code.Placeholder text - yay or nay?
That would be a big "it depends." Placeholder text is the text that sits inside of the input field and provides instructions or an example of the required data format. Generally, it is not best practice to use placeholder text as a substitute for a <label> element. Placeholder text is usually displayed in a low-contrast color that does not meet the minimum contrast requirement of WCAG. Also, the placeholder text disappears once the input element receives focus.
If using placeholder text is a "must" for your form design, Rakesh Paladugula suggests two different accessible solutions you would want to implement.
Using the <label> element
Proper use of the <label> element means the label describes the purpose of the input field in plain, descriptive language. In other words, the label and the input field are properly associated with one another. There are two ways to make that association; explicitly or implicitly.- Associating labels explicitly - "Whenever possible, use the label element to associate text with form elements explicitly. The "for" attribute of the label must exactly match the id of the form control." ~ W3C
Explicit labels usually are better supported by assistive technology.
- Associating labels implicitly - "In some situations, form controls cannot be labeled explicitly. For example, a content author might not know the id of a form field generated by a script, or that script might not add an id at all. In this case, the label element is used as a container for both the form control and the label text, so that the two are associated implicitly." ~ W3C
And please don’t forget! If an input field is required, make sure you indicated that. Many designers place a red asterisk at the beginning of the text label. If you use this method, make sure you place a key above the first input field of your form. Example: Required fields are indicated by *
You can also indicate a required field by simply adding the word "Required" before the label text. This will make the information easier to see and remove any possible barrier for anyone with a form of colorblindness.
For more advanced form labeling instructions and code samples, please visit WebAIM’s Creating Accessible Forms - Advanced Form Labeling.
Error Messages
According to Jakob Neilsen, good error messages include:- An explicit indication that something has gone wrong.
- Human-readable language, not codes or symbols.
- Polite phrasing that doesn't blame users.
- Precise descriptions of exact problems.
- Constructive advice on how to fix the problem.
This is in no way a complete "manual" for creating accessible forms. But using these simple best practices, you are off to a great start towards building forms that are easy to understand, navigate, and complete for everyone.
Resources:
- Create Accessible Forms
- Forms Tutorial - W3C/WAI
- Error Message Guidelines
- 5 ways to make web forms accessible
- HTML Inputs and Labels: A Love Story
- Creating Accessible Forms: General Form Accessibility
- The tabindex Attribute: The Current State of HTML5 Forms
- Creating Accessible Forms: Accessible Form Controls