Javascript 触发角色“;“警惕”;当页面刷新到屏幕阅读器时

Javascript 触发角色“;“警惕”;当页面刷新到屏幕阅读器时,javascript,jquery,wai-aria,screen-readers,wcag2.0,Javascript,Jquery,Wai Aria,Screen Readers,Wcag2.0,我正在处理一个问题,其中我有一个登录页面,当凭据错误时,它将刷新页面,返回的页面将呈现一条错误消息 因为我已经读到,ARIA标记和角色标记只在处理页面中的更改而不是整个刷新时才起作用,所以我还没有找到在页面刷新时触发屏幕阅读器警报警告的解决方案 我曾尝试在文档准备就绪时使用jqueryfocus,但效果不佳。我也尝试过使用JQuery隐藏和显示,但这对于解决方案来说似乎太“黑客”了 我无法避免页面重新加载,因为它会提交表单,刷新后会呈现错误消息 我的代码是这样的: <% if (sess

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

因为我已经读到,ARIA标记和角色标记只在处理页面中的更改而不是整个刷新时才起作用,所以我还没有找到在页面刷新时触发屏幕阅读器警报警告的解决方案

我曾尝试在文档准备就绪时使用jqueryfocus,但效果不佳。我也尝试过使用JQuery隐藏和显示,但这对于解决方案来说似乎太“黑客”了

我无法避免页面重新加载,因为它会提交表单,刷新后会呈现错误消息

我的代码是这样的:

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

最终在页面中呈现的代码如下所示:

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


  • 无法验证登录信息。请重试或重试 请与系统管理员联系。

  • 默认情况下,在页面加载时会宣布警报,但看起来您正在使用表格进行布局,这可能会导致问题。阅读页面标题后,会立即发布一条简单的
    警告消息
    。哦,真的吗?我当时误读了那个信息。这个表非常奇怪,很遗憾,我不能将布局更改为一些简单的或其他错误。但是如果我将div与角色一起使用,div中的任何内容都会被读取?就我的情况而言,还是会有问题?