Form fields and other form controls usually have visible labels, such as “First name" as the label for a text field.

When these labels are marked up correctly, people can interact with them using only the keyboard, using voice input, and using screen readers. Also, the label itself becomes clickable, increasing the target area and making it easier to select small radio buttons or checkboxes.

screenshot

What to check for

  • Ensure that the template is used properly – no additional form widgets are used that do not comply with the implemented functionality.
  • Find any forms on the page. A form could be a single text box, such as E-Mail input for newsletter subscription, or could be a complex form with text fields, radio buttons, checkboxes, drop-down lists, and buttons.
  • Check the following:
    • Keyboard access
    • Labels; every form control has a label associated with it
    • Required fields and other instructions are clearly indicated
    • Guidance and error handling is clearly understandable

How to check

Use a tool like Web Developer Toolbar and open the web page.

  • In the toolbar, select “structure", then “Fieldset/Labels".
  • The form elements (labels and controls) are outlined in a red box, the markup is shown, and potential errors are indicated.
  • Check that the required field indicator is in the field label, or for radio button and check boxes, it is in the "legend". For example:
    • Correct: The asterisk (*) is included in the box around the label.
    • Incorrect: The asterisk (*) is outside of the box around the label.
    • Correct: "(required)" is in the legend.
    • Incorrect: "(required)" is not in the legend.

Learn more about forms accessibility

System provides good defaults
This label indicates that the system provides already good defaults and that editors can rely upon them.