时间戳

首页 > 解决方案 > 页面刷新到屏幕阅读器时触发角色“警报”

javascript - 页面刷新到屏幕阅读器时触发角色“警报”

问题描述

我正在处理一个问题，其中我有一个登录页面，当凭据错误时，它将刷新页面并且返回的页面呈现错误消息。

由于我已阅读 ARIA 标签和角色标签仅在处理页面中的更改而不是整个刷新时才起作用，因此我还没有找到在页面刷新时触发屏幕阅读器警报警告的解决方案。

我曾尝试在文档准备好时使用 Jquery 焦点，但效果不佳。我也尝试过使用 JQuery 隐藏和显示，但这对于解决方案来说似乎太“hacky”了。

我无法避免页面重新加载，因为它提交表单并且刷新时会呈现错误消息。

我的代码是这样的：

 <% 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>
        <% } %>

最终呈现在页面中的代码是这样的：

 <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>

标签： javascriptjquerywai-ariascreen-readerswcag2.0

解决方案

推荐阅读