When building forms:

  • Provide a heading and/or <legend> (even if visually-hidden)
  • Label all form fields (even if visually-hidden)
  • Avoid asking users for unnecessary data:
    • Do not visually demarcate required fields (eg no asterisk) --- by default all fields are required;
    • Optional fields should be limited and marked by appending “(optional)” to the <label>
  • Maintain a meaningful reading order across breakpoints between:
    1. Source/markup order
    2. Visual display order (the sequential logic of the graphical layout)
    3. Tab/keyboard focus order.
  • As necessary, provide hints or special instructions as descriptive text
  • Provide meaningful, programmatically-associated error messages.

When building larger forms --- eg a stepped configuration --- consider adding:

  • A summary of the details required later in the process
  • A navigation to move back or even jump steps
  • The ability to save progress and return later.