Skip to content

Form and Function

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.

    Example of a label "First name:" with the input field to the right. Beneath that is a checkbox with the call to action "Subscribe to Newsletter" Beneath that is the sample HTML for those elements. <label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname"><br> <input type="checkbox" name="subscribe" id="subscribe"> <label for="subscribe">Subscribe to newsletter</label>
  • 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

    Example of a label "First name:" with the input field to the right. Beneath that is a checkbox with the call to action "Subscribe to Newsletter"
    Sample HTML for the above elements described. <label> First name: <input type="text" name="firstname"> </label> <br> <label> <input type="checkbox" name="subscribe"> Subscribe to newsletter </label>

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:

Maggie Vaughan, CPACC
Content Marketing Practitioner
DubBot