Popup Error: Best Practices

  • Use required attribute for required form controls.
  • Use aria-invalid="true" when a field is invalid, otherwise remove the attribute for compatibility with Firefox.
  • Use role="status" on the popup error messages, so they will be announced to the user without interrupting other speech.
  • Referencing the error message:
    • aria-describedby: Most popular way right now to reference error messages. Main issue is screen readers can be configured by the user to turn off reading descriptions.
    • aria-errormessage: Problems with assistive technology support but getting better. This is the "designed" way in ARIA for referencing error messages.
    • aria-labelledby: Overcomes the problems of users turning descriptions off and the issues of support for aria-errormessage, but seems like a misuse of the accessible name for providing error messages.