Accessible form validation example:

The following is an example of a keyboard accessible form. Notice the following accessibility features: visible focus indicator, accessible tooltips, labels for every field, and accessible error messaging. Notice how the "First Name" field has a hidden message within the field's label for the screen reader, then a visible message for the sighted user in a slightly different spot. This is what you need to do if the design shows the error message in a place that precludes you from placing it within the field's label.

Try it out yourself by tabbing through this page with your keyboard and screen reader. Purposely leave fields blank and see what happens. Let me know in the article comments if you notice any issues.

Required fields are indicated with a "*".



Select your pizza toppings*:


Choose a shipping method*: