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

Question

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

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

Answer 1

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

Answer 2

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

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

Надеется, что это поможет.