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

Question

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

从我读到的 aria-live="assertive" 和 role="alert" 应该可以工作

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

我在 IE11 和 Chrome 上测试过（虽然它真的只需要在 IE 上工作）

仅供参考，原来所有的

都是

--主布局

<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

这个问题很老了，但如果其他人偶然发现它（比如我）：

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

辅助技术将宣布实时区域内容的动态变化。活动区域必须首先存在（通常是空的），以便浏览器和辅助技术知道它。随后会宣布所有后续更改。 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