Popup Error Example 4: title attribute used for 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" attribute is used to autmatically announce errors in form controls.
  • title attribute is used to provide an accessible description of 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