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.