Accessibility: using role="alert" for validation errors

To announce a dynamic change, I have added role="alert" to <div class="validation_error">. This <div> appears after page reload, but Accessibility experts say the empty container with role="alert" should already be present in the HTML. Otherwise screen readers can’t present the error correctly.

MDN also explains why an empty container must be present.

I have two questions about this:

  • Why does Gravity add the <div> with the validation error after reload?
  • How can we create an empty div, to which the validation error can be added? Or do you have other suggestions to handle this?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.