form

Как добавить ориентир формы на страницу с помощью WAI-ARIA.

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

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

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

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

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

Пример

Секция статьи "Пример"
        
          
          <div role="form" method="get" aria-labelledby="desc">  <p id="desc">Подписка на новостную рассылку</p>  <label for="email">Электронная почта</label>  <input type="text" name="email" id="email" required>  <button type="submit">Подписаться</button></div>
          <div role="form" method="get" aria-labelledby="desc">
  <p id="desc">Подписка на новостную рассылку</p>
  <label for="email">Электронная почта</label>
  <input type="text" name="email" id="email" required>
  <button type="submit">Подписаться</button>
</div>

        
        
          
        
      

Как пишется

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

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

В большинстве случаев лучше использовать <form> вместо роли form. К тому же, тег лучше поддерживают вспомогательные технологии.

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

Как понять

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

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