Error accessibility: role alert or aria-live polite?

20 Views Asked by At

I was checking resources about what to use to make the errors in my form accessible and I found two possible approaches. Considering we are compiling a form, which approach is the correct one?

  1. To use role="alert" which implies aria-live="assertive". This will disrupt the flow of the user and the error will be announce
    <form>
      <label for="user-email">Email:</label>
      <input type="email" id="user-email" aria-describedby="email-error">
      <span id="email-error" role="alert">Error message</span>
    </form>
  1. Use only aria-live="polite" and make the assistive technology report the error after the user flow ended, without interrupting it immediately.
   <form>
     <label for="user-email">Email:</label>
     <input type="email" id="user-email" aria-describedby="email-error">
     <span id="email-error" aria-live="polite">Error message</span>
   </form>
0

There are 0 best solutions below