Example 5: form errors

This page contains three forms. Submit any of them empty, and each field shows an error message. When that happens, each field should:

• have aria-invalid="true", and
• include its error message in its accessible description, using aria-describedby.

Each error message's id is the field's id plus -error. Two forms work correctly. One is deliberately broken.

Working forms

Deliberately broken

This form has two different faults, one on each field:

• Name: the error appears and is linked to the field, but aria-invalid is never set.
• Phone: aria-invalid is set, but the error message isn't linked to the field. There's no aria-describedby.