aria-live="assertive" role="alert" 不适用于弹出消息

Question

我对 ARIA 及其屏幕阅读器功能相当陌生，但我一直在尝试找出弹出窗口未被读取的原因。当用户单击保存按钮刷新将显示消息的页面时，它会发生更改，但屏幕阅读器不会拾取消息中的更改。

从我读到的内容来看， aria-live="assertive" 和 role="alert" 都应该有效

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

我已经在 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" />

--messages.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）。我认为以下解释了为什么这不会导致屏幕阅读器宣布该消息：

辅助技术将宣布实时区域内容的动态变化。活动区域必须首先存在（通常是空的），以便浏览器和辅助技术能够意识到它。任何后续变更都会随后公布。 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

简单地在加载时在初始标记中包含 aria-live 属性或专门的活动区域角色（例如 role="alert"）将不会产生任何效果。

或者来自其他来源：

大多数屏幕阅读器会自动宣布动态呈现的警报，并且在某些操作系统中，它们可能会触发警报声音。请务必注意，此时，屏幕阅读器不会在页面加载完成之前通知用户页面上出现的警报。

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