Отсутствующие подписи для полей

Более половины сайтов (51%) по данным отчёта WebAIM Million 2026 содержат поля ввода без подписей. У полей нет имени и нельзя идентифицировать какие данные необходимо ввести. Это одна из 6 самых частых ошибок в WAVE.

Исправить эту ошибку не сложно. Нужно указать подпись (имя) одним из способов. Порядок отражает приоритет применения:

- aria-labelledby
- aria-label
- <label>
- title
- placeholder
- aria-placeholder

Лучше всего указывать видимые подписи в <label> и связывать их с полями через for и id. Или оборачивать в <label> с подписью внутри. Эти варианты не требуют ARIA, что соответствует первому правилу. Поэтому они предпочтительны.

<label for="first_name">
  Имя (обязательно)
</label>
<input 
  type="text"
  name="first_name" 
  id="first_name" 
  autocomplete="given-name" 
  autocapitalize="words" 
  placeholder="Алексей"
  required
> 

<label> 
  Имя (обязательно)
  <input 
    type="text"
    name="first_name"
    autocomplete="given-name"
    autocapitalize="words"
    placeholder="Алексей"
    required
  >
</label>

Атрибут title использовать не стоит. Он задаёт имя полю, но также создаёт системную всплывающую подсказку. Эта подсказка не соответствует требованиям доступности по критериям 1.4.4, 1.4.10, 1. 4.12, 1.4.13.

Иногда дизайнеры рисуют подпись внутри поля и это выглядит как заполнитель. В таком случае разработчик может указать атрибут placeholder. Хотя он задаёт имя полю, он предназначен не для этого. Используйте атрибут по назначению.

Когда подпись находится внутри поля, можно прибегнуть к технике плавающих подписей. Это когда при фокусе на поле, подпись подъезжает вверх и остаётся видимой. Техника не лишена проблем, но это лучше, чем подпись в placeholder.

aria-label можно применить для быстрого исправления отсутствующей подписи, но она не будет видна визуально. Это нарушает один из критериев WCAG и ухудшает доступность. Поэтому лучше избегать aria-label для подписей.

aria-labelledby работает как <label>, но наоборот: поле ссылается по id на элемент, который действует как подпись. Такой способ подойдёт для нестандартных полей ввода или если нет возможности добавить <label> в разметку.

Что касается критериев, применимых к подписям, то их пять:

- 1.3.1 Info and Relationship — подпись должна быть программно связана с полем, а её визуальная информация программно обозначена;
- 2.4.6 Headings and Labels — подпись, если она есть, должна быть понятной и описательной;
- 2.5.3 Label in Name — видимая подпись должна полностью или частично соответствовать программно заданному имени поля;
- 3.3.2 Labels or Instructions — у полей должна быть видимая подпись или инструкция для обозначения требуемой информации;
- 4.1.2 Name, Role, Value — у поля должно быть программно заданное имя.

Вариант с <label> соответствует всем критериям, поэтому он предпочтительный. Всем критериям будет соответствовать вариант с aria-labelledby, ссылаясь на элемент с видимым описательным текстом. Это резервный вариант.

<label for="first_name">
  Имя (обязательно)
</label>
<input
  type="text"
  name="first_name"
  id="first_name"
  autocomplete="given-name"
  autocapitalize="words"
  placeholder="Алексей"
  required
>

<span id="first_name">
  Имя (обязательно)
</span>
<input
  type="text"
  name="first_name"
  autocomplete="given-name"
  autocapitalize="words"
  placeholder="Алексей"
  required
  aria-labelledby="first_name"
>

#html #a11y