Блог

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

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

Jaws и браузер ищут обновленный контент для оповещения, поэтому я обнаружил, что мне пришлось полностью добавлять и удалять данные, чтобы заставить оповещения работать стабильно. Например, я удалил текст, когда ошибка исчезнет, и поместил текст обратно, как только произошла ошибка. Это можно сделать несколькими способами. Во-первых, используя 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>
  

Плунжер

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

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

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

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