Trigger role"alert" when page refreshed to screen reader

521 Views Asked by At

I'm dealing with a problem, in which i have a login page and when the credentials are wrong it will refresh the page and the page returned renders an error message.

Since i have read that ARIA tags and role tags work only when dealing with changes in the page rather than a whole refresh, i haven't found a solution to trigger the alert warning to the screen reader when the page is refreshed.

I have tried using Jquery focus when document is ready but it hasn't worked well. I have also tried using JQuery hide and show but that seems too "hacky" for a solution.

I can't avoid the page reloading since it submits the form and when it is refreshed it renders the error message.

My code goes like this:

 <% if (session.getAttribute("formErrors") != null && ((FormErrors)session.getAttribute("formErrors")).isEmpty() == false) { %>
        <div id="divAlertErrorTable" class="alert alert-danger" role="alert" aria-relevant="all">
            <form:messages/>
            <form:errors/>
        </div>
        <% } %>

The code that is finally rendered in the page goes like this:

 <div
  id="divAlertErrorTable"
  class="alert alert-danger"
  role="alert"
  aria-relevant="all"
>
  <br />
  <table cellpadding="3" cellspacing="0" class="errorMessageTable">
    <tr>
      <td>
        <li class="errorMessage">
          The login information could not be validated. Please try again or
          contact your system administrator.
        </li>
      </td>
    </tr>
  </table>
</div>
0

There are 0 best solutions below