Some suggestions:
1. State the type of message
Announcing the type first (like "Error: [message]"), this is generally a good practice:
- It immediately communicates the severity to screen reader users
- It helps users mentally prepare for the information
- It provides context similar to how visual users get from the colors/icons
<div aria-live="assertive" aria-atomic="true">
<span class="visually-hidden">Error:</span>
<p>Your form submission failed. Please try again.</p>
</div>
2. Use role="alert"
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
For stronger levels like error or warning, I think this fits the use case
Some suggestions:
1. State the type of message
Announcing the type first (like "Error: [message]"), this is generally a good practice:
2. Use
role="alert"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
For stronger levels like error or warning, I think this fits the use case