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>