Должен ли я использовать aria-invalid, когда я делаю недействительным поле с помощью API проверки ограничений HTML5?

Question

Как я понимаю, не рекомендуется добавлять дубликаты ролей к элементу:

<nav role="navigation"></nav>

Это избыточно, потому что nav сообщает программе чтения с экрана, какова семантика контента.Пока все хорошо.

---

Теперь я хочу сделать недействительным поле формы.Я понимаю, что классически я должен преобразовать это:

<input type="text" name="username">

… в

<input type="text" name="username" aria-invalid="true">

… после отправки формы.

---

Однако мы используем JavaScript и API проверки ограничений HTML5 для проверки ввода перед отправкой в ​​API.И да, вход снова проверяется на стороне сервера.

---

Итак, допустим, я аннулировал поле:

input.setCustomValidity('This value is invalid');

Нужно ли мне добавлять aria-invalid="true" на вход?

Я бы сказал нет, потому что это избыточно тому, что двигатель уже знает.Но я не могу найти источник, описывающий этот сценарий явно.

Answer 1

aria-invalid является подсказкой для программ чтения с экрана, что поле содержит ошибку.В качестве пользовательских программ чтения с экрана через поля <input> они будут уведомлены, если поле недействительно.

Использование aria-invalid следует использовать вместе с связыванием сообщения об ошибке с полем тоже (через aria-describedby).Если вы отображаете ошибку под полем, не связывая эту ошибку с полем, пользователь программы чтения с экрана не узнает об этом.Если вы используете aria-invalid сам по себе, пользователь не будет знать , почему поле ошибочно.

Таким образом, вы должны иметь что-то вроде:

<input type="text" name="username" aria-invalid="true" aria-describedby="errmsg">
<span id="errmsg">The name you entered cannot be found in our system</span>

Обновление: После дальнейших разъяснений я вижу, что сейчас запрашивает OP, и указание на то, что не нужно использовать дублирующую информацию, такую ​​как <nav role="navigation>.

При использовании api проверки, псевдоклассы(например, :invalid), но программы чтения с экрана, как правило, (*) , не знают или не заботятся о CSS и ничего не знают о псевдоклассах.

( (*) Единственное исключение - :before / :after, которое можно использовать при вычислении доступного имени, как указано в шаге 2.F.ii из https://www.w3.org/TR/accname-1.1/#step2).

Однако, в дополнение к установленному псевдоклассу :invalid, также устанавливается obj.validity.valid. Так что, если этот атрибут установлен, вам также нужно использовать aria-invalid? Или другой способ задать, знают ли программы чтения с экрана об атрибуте validity.valid?

Я не смог найти никаких документированных ссылок, относящихся к программам чтения с экрана, но от тестирования и firefox, и chrome surface validity.valid до программы чтения с экрана (JAWS иNVDA), поэтому они объявляют поле недействительным. Но Internet Explorer (у меня Win7, поэтому у меня нет Edge) и Safari на iOS (у меня нет Mac для тестирования) делают , а не поверхностьполе с ошибкой.

Таким образом, чтобы охватить все ваши базы, я бы порекомендовал установить aria-invalid. Хорошо, что вы не хотите быть избыточными, но, по крайней мере, избыточность ничего не повредит.просто дополнительный код или набор текста, который вы должны сделать.