Какое визуальное свойство вы устанавливаете на полях?Просто дать им красную схему?Этого достаточно для визуальных пользователей?Вы не отображаете сообщение об ошибке, связанное с полем?
Я бы ожидал увидеть какое-то сообщение об ошибке, сообщающее, что не так с полем, чтобы я знал, как его исправить.
Настройка aria-invalid - хорошее начало, и также хорошо, что вы спрашиваете, как уведомить пользователя программы чтения с экрана, что поле стало недействительным.Если вы не отображаете какие-либо сообщения об ошибках, то, вероятно, у вас должно быть визуально скрытое (*) сообщение об ошибке внутри области aria-live, которое будет обрабатывать объявление сообщения дляпользователь программы чтения с экрана.
(*) Для визуально скрытого текста выполните поиск в Google по классу "sr-only" или посмотрите на Что такое sr-only в Bootstrap 3?
<input aria-invalid="true">
<span id="myerror" aria-live="polite" class="sr-only"></span>
Когда вы проверяете поле и обнаруживаете ошибку, вставьте новый текст в «myerror» <span>, и программа чтения с экрана сообщит об этом.
Однако, как упоминалось ранее, онообычно визуально отображает сообщение об ошибке.Если вы хотите сделать это, вы можете использовать тот же <span aria-live="polite">, но не использовать класс «sr-only», чтобы сообщение об ошибке было видно всем.Затем свяжите ошибку с <input>, используя aria-describedby.
<input aria-invalid="true" aria-describedby="myerror">
<span id="myerror" aria-live="polite"></span>
Взгляните на Критерии успеха WCAG 3.3.1 - Идентификация ошибок .В нем есть несколько советов о том, как обрабатывать ошибки.
Вы также можете взглянуть на « Проверка и восстановление формы с помощью WebAIM и восстановление ошибок »
.