Accessibility: Form validation alerts not readable by screen reader

Lizzam

For Hubspot forms that we're using, the validation errors are not being read by screen readers. 

Lizzam_0-1623833468405.png

When inspecting the errors, it seems that the HTML code used is not allowing the alert to be read properly.

 

Below are the suggestions to allow the error messages to be accessible even when it's an inline messages.

 

Lizzam_1-1623834012901.png

  • Removing role=alert from the error messages.
  • Changing the error messages to be contained in an inline element like SPAN
  • adding unique ID to the alert messages.
  • The error messages and the fields are connected using Aria-Labelledby.