Челюсти не читает сообщение об ошибке

Question

Я использую angularjs и пытаюсь сделать сайт доступным. Когда пользователь не вводит или не забывает вводить в обязательное поле, челюсти не считывают сообщение об ошибке. Я попытался добавить role="alert" в div, но мне это не нравится. Какие-либо предложения

   <div aria-type-label="{{'some:error'}}">
   <span role="alert" class="error-message">Error</span>
   </div>

Answer 1

Вы должны использовать aria-описанный и роль оповещения вместе. Пожалуйста, посмотрите:

<input type="textbox" id="yourField" aria-describedby="yourFieldError">
<span role="alert" data-bind="visible:yourCondition" class="error-message" id="yourFieldError">Error</span>

Надеюсь, это поможет.

Answer 2

Челюсти и браузер ищут обновленный контент для оповещения, поэтому я обнаружил, что мне пришлось полностью добавлять и удалять данные, чтобы оповещения работали согласованно. Например, я удалил текст, когда ошибка исчезла, и поместил текст обратно, как только произошла ошибка. Это можно сделать несколькими способами. Один, используя ng-if={{error}} тогда HTML будет удален из DOM, если нет ошибки, и помещен обратно в DOM, если возникнет ошибка.

Другой способ - установить в качестве значения errorMessage пустую строку, если ошибки нет, или сообщение об ошибке, если есть ошибка. Таким образом, текст в DOM фактически изменяется, что приводит к появлению предупреждения.

Возможный пример использования обоих упомянутых методов:

<input name="theTextInput" type="text" ng-model="filled" placeholder="Add something"/>
<div role="alert" ng-if="filled" aria-type-label="">
   <span class="error-message">{{message}}</span>
</div>
<span class="sr-only" style="display: none;">{{message = "Has Error"}}</span>

Plunker

ПРИМЕЧАНИЕ. Это работало в Chrome в октябре 2016 года и в ноябре 2016 года, но сегодня похоже, что в данный момент ничего не происходит. По-прежнему работает в Firefox.