by adding this attribute dynamically upon error, or
by adding the error message element itself dynamically upon error.
This way, screen readers will read out its text content upon error.
In doing so, remove the error message element's id from the aria-describedby attribute. Otherwise, screen readers will read out the error message twice.
Use aria-describedby only for helper text that's always shown
Add
role="alert"to error message elements eitherThis way, screen readers will read out its text content upon error.
In doing so, remove the error message element's
idfrom thearia-describedbyattribute. Otherwise, screen readers will read out the error message twice.Use
aria-describedbyonly for helper text that's always shown