aria-live = assertive role = alert не работает для всплывающих сообщений

Я новичок в 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" />

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

РЕДАКТИРОВАТЬ:

Это скорее проблема, связанная с тем, что страница не перечитывается после обновления после нажатия кнопки сохранения.


person Geogrio    schedule 20.02.2018    source источник


Ответы (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

person Daniel Hintze    schedule 22.08.2018