Popup Error Example 5: aria-labelledby attribute used for error message

Features

  • aria-labelledby attribute is used to label form control and includes element with error message.
  • 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.

Pizza Order Form

Name
Address
Phone
Delivery Method
Crust
Thin
Classic
Deep Dish
Toppings
Sausage
Pepperoni
Mushrooms
Onions
Green Peppers
Back Olives
Extra cheese

HTML Source Code

CSS Source Code

Javascript Source Code