Popup Error Example 3: aria-describedby reference to error message

Features

  • label[for] element is used to label form control.
  • HTML5 required attribute to identify a form control is required.
  • aria-invalid="true" attribute is used to identify a form control has an invalid value, otherwise the attribute is removed for compatibility with Firefox.
  • role="status" is used to autmatically announce errors in form controls.
  • aria-describedby is used to provide a programmatic reference to the error message, so assistive technologies could render information about the error (e.g. Braille).

Pizza Order Form

Crust
Toppings

HTML Source Code

CSS Source Code

Javascript Source Code