aria-invalid

Состояние виджета из 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. Лучше всего сообщать об ошибке после того, как пользователь ввёл свои данные или нажал на кнопку отправки формы.

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

• <textarea>, <input> с типами text, email, tel, url или роли textbox.
• <input type="checkbox"> или роли checkbox.
• <input type="range"> или роли slider.
• <input type="number"> или роли spinbutton.
• <select> или ролям combobox и listbox.
• <td> и <th> или роли cell.
• gridcell.
• radiogroup.
• application.
• tree.

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

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