Form & Input Fields

Clearly marked-up forms are critical for accessibility in all areas.

FORM LABELS

  • Be succinct.

  • Put the label above the form field, not beside it.

  • Consider font size, recommended 16px especially for form inputs.

  • Labels & Inputs need to meet color contrast. See Contrast.

  • If a form field is required, at the beginning provide textual indication and description of associated symbolism, e.g., "* denotes required field."

Do not use an <input> element as a placeholder attribute. Use the <label>. Misuse is problematic for people with cognitive disabilities or short-term memory issues, in that the input text disappears with focus, leaving no information about field purpose. It is best to use both

An example from Shopify Mobile app; note while <input> disappears, the <label> remains, providing context.

FORM BOUNDARIES

  • Form boundaries must comply with color contrast. See Contrast.

FORM ERRORS

  • If there is an error, the error message should appear beneath the field in error, available using both color and text.

  • Utilize real-time validation to prevent users from submitting to only find the data input was invalid. This reduces anxiety among those with cognitive, anxiety or short-term disabilities.

  • Provide Descriptive Error messages. For example if a password requires symbols, numbers, or capitalization, indicate that in the error message. “The password must have at least 6 characters and 1 symbol.”

    • for dates, if user enters a date that occurs in the past, be descriptive of their error, e.g., “Date occurs in the past.

  • Consider use of “input masks” which help users focus on task at hand and follow along the information that they need to provide and reduces incidence of error.