aria-errormessage

Свойство связи и виджета из 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. Если элемент связан с несколькими ошибками, перечислите в атрибуте несколько ID через пробел.

        
          
          <label for="email">  Ваша почта (обязательно):</label><input  id="email"  type="email"  name="email"  aria-invalid="false"  aria-errormessage="error success"  required><span  id="error"  aria-live="assertive"  hidden>  <!-- Текст ошибки --></span><span  id="success"  aria-live="polite"  hidden>  <!-- Текст про успешное действие --></span>
          <label for="email">
  Ваша почта (обязательно):
</label>
<input
  id="email"
  type="email"
  name="email"
  aria-invalid="false"
  aria-errormessage="error success"
  required
>
<span
  id="error"
  aria-live="assertive"
  hidden
>
  <!-- Текст ошибки -->
</span>
<span
  id="success"
  aria-live="polite"
  hidden
>
  <!-- Текст про успешное действие -->
</span>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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