How to make Forms with error validation Accessible

HTML elements

• <label>to associate a text label with a form <input> field.
• <legend> element is used to add a caption to a group of related form <input> elements that have been grouped together into a <fieldset>.

WAI-ARIA

• Roles: define what an element is or does.
  1. role=”form”
  2. role=”alert”
• Properties: it’s used to give them extra meaning or semantics.
  1. aria-required for required fields.
  2. aria-labelledby to add more info for the field input.
• States: define the current conditions of elements.

JAVASCRIPT

• Make sure the errors reads by screen reader and the focus move to the errors.

Extra Info

• Use legend element to display caption about the form purpose.
• Use the labels above the field
• Message shows at the top of form says “Required fields are followed by (*)”
• Follow each required filed with start (*) sign.