Question

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

从我读过的文章中，aria-live =“assertive”和role =“alert”都应该有效

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

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

FYI最初全部＆lt; p>是＆lt; c：out＆gt;

- 主要布局

<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 ＆LT;

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

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

1 个答案: