Web Accessibility TestingFor Everyone

Forms - More Issues

Things to check for:

  • Form labels are associated with their elements.
  • You can easily get to and control all actionable items only using the keyboard.
  • The tab order of form elements make sense.
  • A form element that has “focus” ( tabbed or arrowed to) looks visually different.
  • Help and error text is connected to the form field.

Address

The "First name" label is not associated with its text field.
Rating (star) input is not reachable via the keyboard.

Tab order is incorrect. The tab order should be:

  1. First name
  2. Last name
  3. Address
  4. City
  5. Star
  6. Submit button

Search

Search is missing a label

Catalog

Flowers
Color
The color checkboxes are missing a fieldset and legend.
Email where your catalog will be sent.
Describe your climate including average temperature.
The "Climate" field does not have the directions associated with the textbox (field element).

Gardening Experience (Required elements are marked with a "*")

The "Favorite Flower" field is missing the required='true' or aria-required='true' attribute.
Error: Please enter a number.
Error: Please check the box to continue.
The code of conduct check box is missing the aria-invalid='true' attribute and the error message is not connected to the checkbox via the aria-describedby attribute.
Only color is used to represent that there is an error on the goals text field.