aria-invalid

Атрибут, который нужен для указания на ошибку при вводе данных.

Время чтения: меньше 5 мин

Кратко

Скопировано

Состояние виджета из WAI-ARIA. Нужно для обозначения того, что пользователь ввёл неправильные данные. Например, в них ошибка, они не соответствуют нужному формату, вообще не введены и другие похожие ситуации.

Пример

Скопировано
        
          
          <label for="drink">Любимый напиток:</label><input  id="drink"  type="text"  name="drink"  aria-invalid="false"  aria-describedby="error"><span  id="error"  aria-live="assertive"  aria-hidden="true"></span><button>Рассказать</button>
          <label for="drink">Любимый напиток:</label>
<input
  id="drink"
  type="text"
  name="drink"
  aria-invalid="false"
  aria-describedby="error"
>
<span
  id="error"
  aria-live="assertive"
  aria-hidden="true"
>
</span>
<button>Рассказать</button>

        
        
          
        
      
Открыть демо в новой вкладке

В демо показываем ошибку с текстом «Введите один любимый напиток. Например, чай, кофе или вода», когда поле пустое и нажали на кнопку «Отправить».

Скринридер прочтёт код примерно так: «Любимый напиток, редактировать, неверно. Введите один любимый напиток. Например, чай, кофе или вода».

Как пишется

Скопировано

Добавьте к тегу aria-invalid с одним из следующих значений:

  • false (по умолчанию) — нет ошибки;
  • true — введены неверные данные;
  • grammar — есть грамматическая ошибка;
  • spelling — есть орфографическая ошибка.

Любое другое значение в этом атрибуте будет обработано как true.

При валидации ошибок не забывайте менять значение aria-invalid с помощью JavaScript. Лучше всего сообщать об ошибке после того, как пользователь ввёл свои данные или нажал на кнопку отправки формы.

Этот атрибут раньше использовали для всех тегов и ролей, но сейчас его можно задавать только некоторым интерактивным элементам:

Когда у aria-invalid значение true, grammar или spelling, хорошо рассказать пользователям, что пошло не так и как правильно ввести данные. С этим помогут атрибуты aria-describedby или aria-errormessage. С их помощью свяжите текст ошибки с элементом, где она допущена.

Как понять

Скопировано

Чтобы сделать доступную всем пользователям валидацию форм, недостаточно добавить специальные стили для этого состояния и разместить рядом с нужным элементом текст ошибки. Нужно рассказать об этом и пользователям вспомогательных технологий, которые не видят интерфейс. Здесь приходит на помощь aria-invalid.