aria-errormessage

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

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

Кратко

Секция статьи "Кратко"

Свойство связи и виджета из WAI-ARIA. Оно связывает текст ошибки с элементом, в котором что-то пошло не так.

Пример

Секция статьи "Пример"
        
          
          <label for="email">Ваша почта (обязательно):</label><input  id="email"  type="email"  name="email"  aria-invalid="false"  aria-errormessage="error"  required><span  class="error-message"  id="error"  aria-live="assertive">  Поле с почтой обязательно для заполнения.</span><button class="button button-aqua">Отправить</button>
          <label for="email">Ваша почта (обязательно):</label>
<input
  id="email"
  type="email"
  name="email"
  aria-invalid="false"
  aria-errormessage="error"
  required
>
<span
  class="error-message"
  id="error"
  aria-live="assertive"
>
  Поле с почтой обязательно для заполнения.
</span>
<button class="button button-aqua">Отправить</button>

        
        
          
        
      
        
          
          .error-message {  display: none;}
          .error-message {
  display: none;
}

        
        
          
        
      

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

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

Скринридер прочтёт ошибку примерно так: «Ваша почта обязательно, редактировать, обязательно, неверно. Поле с почтой обязательно для заполнения».

Как пишется

Секция статьи "Как пишется"

Добавьте к тегу aria-errormessage со значением в виде ID и свяжите с ним другой тег с текстом ошибки и таким же ID.

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

Обязательно сочетайте aria-errormessage с другим атрибутом aria-invalid. Когда у aria-invalid значение false, текст связанной с элементом ошибки нужно скрыть. Если пользователь неправильно заполнил поле и значение aria-invalid стало true, стоит показать ошибку всем, включая пользователей скринридеров. С этим поможет JavaScript.

Скрыть ошибку от всех можно с помощью свойства display: none. Другой вариант — добавлять текст ошибки методами из JavaScript. Например, appendChild() или insertAdjacentText().

Также не забывайте добавлять для элемента с ошибкой атрибут aria-live со значением assertive или роль alert. Благодаря им скринридер расскажет об ошибке как только она появится на странице.

Так как текст ошибки из aria-errormessage не всегда озвучивается скринридерами, лучше использовать вместо него aria-describedby. Этот атрибут работает точно так же, но в него можно добавлять любое краткое описание элемента, не только текст ошибки.

        
          
          <label for="email">Ваша почта (обязательно):</label><input  id="email"  type="email"  name="email"  aria-invalid="false"  aria-describedby="error"  required><span  class="error-message"  id="error"  aria-live="assertive">  Поле с почтой обязательно для заполнения.</span>
          <label for="email">Ваша почта (обязательно):</label>
<input
  id="email"
  type="email"
  name="email"
  aria-invalid="false"
  aria-describedby="error"
  required
>
<span
  class="error-message"
  id="error"
  aria-live="assertive"
>
  Поле с почтой обязательно для заполнения.
</span>

        
        
          
        
      

Как понять

Секция статьи "Как понять"

aria-errormessage связывает один элемент с другим, в котором содержится сообщение об ошибке.