Clearly label form fields

For: Development, Design

Labels or instructions (3.3.2 level A)

https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions

  • Make sure that every form field has a clear descriptive label that tells users what information they need to enter.
  • Put the label next to the form field (usually above) so that the user is clear which field it relates to.
  • Make sure only one label is associated to a field.
  • Do not rely on placeholder text.
  • Provide text instructions at the beginning of a form or set of fields that describes the necessary input.
  • When providing inline help text, use aria-describedby to associate the help text with the input.
  • The label should be visible but there are exceptions, for example, a site search does not need a visible label if people can see the search icon and the word “Search” in the box.
  • Check there is a "for" attribute on the label and that it matches the "id" attribute of the field.
  • Make sure it is clear which form fields are optional and mandatory.

Error prevention (Legal, Financial, Data) (3.3.4 level AA)

https://www.w3.org/WAI/WCAG21/Understanding/error-prevention-legal-financial-data

  • When we are dealing with data related to legal, financial, or sharing of sensitive information, the user needs to be provided with an option to verify the data before submitting and to rectify if there are any mistakes.
  • For example, when a transaction is involved, like paying for council tax or a parking fine a review information screen should appear where all the information provided by the user is populated and the user can review and confirm the transaction before submitting the form.