form

ARIA-роль ориентира, которая определяет область формы. Обычно формы состоят из нескольких полей и кнопки для отправки данных, которые ввёл пользователь.

Роль form есть у тега <form> по умолчанию.

        
          
          <div  role="form"  aria-label="Подписка на рассылку">  <label for="email">Электронная почта</label>  <input    type="text"    id="email"    name="email"    autocomplete="email"    spellcheck="false"  >  <button>Подписаться</button></div>
          <div
  role="form"
  aria-label="Подписка на рассылку"
>
  <label for="email">Электронная почта</label>
  <input
    type="text"
    id="email"
    name="email"
    autocomplete="email"
    spellcheck="false"
  >
  <button>Подписаться</button>
</div>

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

В первую очередь используйте HTML-элемент <form> вместо явной роли form. У тега <form> хорошая поддержка браузерами и скринридерами. Также <form> по умолчанию поддерживает необходимые атрибуты и слушает событие onSubmit: вам не нужно писать лишний JavaScript.

        
          
          <form aria-label="Подписка на рассылку">  <label for="email">Электронная почта</label>  <input    type="text"    id="email"    name="email"    autocomplete="email"    spellcheck="false"  >  <button type="submit">Подписаться</button></form>
          <form aria-label="Подписка на рассылку">
  <label for="email">Электронная почта</label>
  <input
    type="text"
    id="email"
    name="email"
    autocomplete="email"
    spellcheck="false"
  >
  <button type="submit">Подписаться</button>
</form>

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

Явная роль понадобится в редких случаях: при вёрстке сложных кастомных компонентов или для поддержки очень старыми браузерами.

Когда задаёте role="form" явно, лучше добавлять роль к семантически нейтральным <div> и <span>. Одно из правил использования ARIA — не перезаписывать роли без необходимости.

Не забудьте по-настоящему отправить данные из формы. Роль, в отличие от HTML-элемента, не умеет слушать браузерные события. Для этого, например, можете использовать метод fetch():

        
          
          const form = document.getElementById('custom-form')const input = document.getElementById('email')const button = document.getElementById('subscribe-btn')function submitForm(event) {  event.preventDefault()  const email = input.value.trim()  if (email) {    fetch('/subscribe', {      method: 'POST',      headers: { 'Content-Type': 'application/json' },      body: JSON.stringify({ email })    })  }}button.addEventListener('click', submitForm)
          const form = document.getElementById('custom-form')
const input = document.getElementById('email')
const button = document.getElementById('subscribe-btn')

function submitForm(event) {
  event.preventDefault()
  const email = input.value.trim()

  if (email) {
    fetch('/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email })
    })
  }
}

button.addEventListener('click', submitForm)

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

Пользователи скринридеров смогут быстро переместиться к форме только в случае, если форма имеет доступное имя. Есть два способа задать имя форме: через атрибуты aria-label и aria-labelledby.

Имя из aria-label скрыто визуально, но доступно для пользователей вспомогательных технологий и поисковых роботов.

        
          
          <form  aria-label="Подписка на рассылку">  <!-- Содержимое формы --></div>
          <form
  aria-label="Подписка на рассылку"
>
  <!-- Содержимое формы -->
</div>

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

С помощью aria-labelledby с формой связывают видимое имя, например, из заголовка.

        
          
          <div  role="form"  aria-labelledby="subscription">  <h3 id="subscription">    Подписка на рассылку  </h3>  <!-- Остальное содержимое --></div>
          <div
  role="form"
  aria-labelledby="subscription"
>
  <h3 id="subscription">
    Подписка на рассылку
  </h3>
  <!-- Остальное содержимое -->
</div>

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

Хотя на странице может быть несколько форм, они не обязательно должны быть ориентирами. Старайтесь называть только формы для ввода важных данных, к которым пользователям скринридеров было бы полезно и необходимо быстро перемещаться.

Для элемента с ролью form можно использовать и другие глобальные ARIA-атрибуты.

Роль form создаёт ориентир на странице. Это значит, что пользователи скринридеров могут быстро переместиться к этой части страницы с помощью горячих клавиш или через меню со всеми ориентирами.

💡 Для области с полем для поиска по сайту используйте <search> или role="search".

💡 Без aria-label или aria-labelledby форма не станет ориентиром для пользователей скринридеров.