html - aria-live ="assertive"角色 ="alert"不适用于弹出消息

Question

我对 ARIA 及其屏幕阅读器功能还很陌生，但我一直在努力弄清楚为什么弹出窗口没有被阅读。当用户单击保存按钮刷新消息将出现的页面时，它会发生变化，但屏幕阅读器不会接收消息中的更改。

根据我的阅读，aria-live="assertive"和 role="alert"都应该有效

我尝试了标签和 aria 属性的各种位置，但没有成功。只有当我重新单击主要内容部分时，它才会读取警报。

我已经在 IE11 和 Chrome 上测试过(虽然它真的只需要在 IE 上工作)

仅供引用，最初所有的 < p > 都是 < c:out >

--主要布局

<div class="body-content" style="padding: 4px 0">
 <a id="main_content" tabindex="-1" name="main_content"></a>

<!--                <h1>Main Content</h1> -->
<!--                <p>This is the main content area. -->


<tiles:insertAttribute name="body" />         


</div>

--在每个屏幕上包含消息

<jsp:include page="messages.jsp" />

--消息.jsp<

div id="errorDiv" aria-live="assertive" class="error" role="alert">
<c:if test="${not empty errors}">
<c:set var="popupErr" value=""/>

        <c:forEach var="error" items="${errors}">

                    <p > ${error}</p>
                <br />
            <c:if test="${popupErr != ''}">
               <c:set var="popupErr">

                            <p > ${popupErr}</p>

                       <c:out value="${popupErr}" escapeXml="false" />\r\n

                   </c:set>
            </c:if>
            <c:set var="popupErr" >

                    <p> ${error}</p>

                <c:out value="${popupErr}" escapeXml="false"/><c:out value="${error}" escapeXml="false" />

            </c:set>
        </c:forEach>

    <c:remove var="errors" scope="session"/>

</c:if>

</div>
<div id="msgDiv" class="message" aria-live="assertive" role="alert">
<c:if test="${not empty message}">
<c:set var="popupMsg" value=""/>

        <c:forEach var="msg" items="${message}">

                <p > ${msg}</p>
                <br />  
            <c:if test="${popupMsg != ''}">
               <c:set var="popupMsg">

                <p > ${popupMsg}</p>

                  <c:out value="${popupMsg}" escapeXml="false"/>\r\n

               </c:set>
            </c:if>

            <c:set var="popupMsg">

                <p > ${popupMsg}</p>

                <c:out value="${popupMsg}" escapeXml="false"/><c:out value="${msg}" escapeXml="false"/>

            </c:set>              
        </c:forEach>


    <c:remove var="message" scope="session"/>

</c:if>

</div>

编辑:

这更多的是页面在点击保存后刷新后没有被重新读取的问题

Answer 1

这个问题很老，但是如果其他人偶然发现了它(比如我):

您的应用程序似乎是在服务器端呈现的，因此就浏览器而言是静态的(没有 JS 涉及在运行时更改 DOM)。我认为以下内容解释了为什么这不会导致屏幕阅读器宣布消息:

Assistive technologies will announce dynamic changes in the content of a live region. The live region must first be present (and usually empty), so that the browser and assistive technologies are aware of it. Any subsequent changes are then announced. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

Simply including an aria-live attribute or a specialized live region role (such as role="alert") in the initial markup as it's loaded will have no effect.

或来自其他来源:

Dynamically rendered alerts are automatically announced by most screen readers, and in some operating systems, they may trigger an alert sound. It is important to note that, at this time, screen readers do not inform users of alerts that are present on the page before page load completes.

https://www.w3.org/TR/wai-aria-practices/#alert