0Pricing
HTML Academy · Урок

Элемент label и доступность

Связывайте подписи с полями input для поддержки программ чтения с экрана

«Элемент label и доступность» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Зачем нужны подписи

Элемент <label> связывает текстовое описание с элементом управления формой:

  • Программы чтения с экрана объявляют подпись, когда поле получает фокус
  • Нажатие на подпись активирует связанное поле
  • Без подписи пользователи программ чтения с экрана не знают назначение поля

Явная подпись с помощью for

Атрибут for связывает подпись с полем через его id:

<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- for="email" matches id="email" -->
<!-- Clicking "Email address" moves focus to the input -->
<!-- Required for proper accessibility -->

Неявная подпись (обёртывание)

Если поместить поле внутрь подписи, создаётся неявная связь:

<!-- No for/id needed — input is inside label -->
<label>
  Email address
  <input type="email" name="email">
</label>

<!-- Works fine but explicit association is more robust
     (especially when label and input are far apart in the DOM) -->

Разделение подписи и поля

Если подпись и поле нельзя разместить рядом, используйте aria-labelledby:

<h2 id="section-title">Billing Details</h2>
<input type="text" name="name" aria-labelledby="section-title">
<!-- The heading serves as the accessible label for the input -->

aria-label как альтернатива

Если видимую подпись добавить невозможно, используйте aria-label:

<!-- Search form with icon button -->
<form>
  <input type="search" name="q" aria-label="Search the site">
  <button type="submit" aria-label="Submit search">
    <svg><!-- magnifier icon --></svg>
  </button>
</form>

Одна подпись для каждого поля

У каждого поля должна быть ровно одна подпись. Для нескольких полей нужны отдельные подписи:

<!-- BAD: one label for multiple inputs -->
<label>First and last name
  <input type="text" name="first">
  <input type="text" name="last">
</label>

<!-- GOOD: separate labels -->
<label for="first">First name</label>
<input type="text" id="first" name="first">

<label for="last">Last name</label>
<input type="text" id="last" name="last">

Обозначение обязательного поля

Обозначайте обязательные поля с учётом требований доступности:

<!-- Visual + accessible required indicator -->
<label for="email">
  Email address
  <span aria-hidden="true">*</span>         <!-- visual asterisk -->
  <span class="sr-only">(required)</span>    <!-- screen reader text -->
</label>
<input type="email" id="email" name="email" required>

Fieldset и legend для групп

Объединяйте связанные поля с помощью <fieldset> и <legend>:

<fieldset>
  <legend>Shipping address</legend>

  <label for="addr-street">Street</label>
  <input type="text" id="addr-street" name="street" autocomplete="address-line1">

  <label for="addr-city">City</label>
  <input type="text" id="addr-city" name="city" autocomplete="address-level2">
</fieldset>

Fieldset для групп переключателей

Для групп переключателей всегда нужны fieldset и legend:

<fieldset>
  <legend>Preferred contact method</legend>

  <label>
    <input type="radio" name="contact" value="email"> Email
  </label>
  <label>
    <input type="radio" name="contact" value="phone"> Phone
  </label>
  <label>
    <input type="radio" name="contact" value="text"> Text message
  </label>
</fieldset>

Placeholder — не подпись

Заполнитель исчезает, когда пользователь начинает вводить текст, поэтому он не может заменить подпись:

<!-- BAD: placeholder used as a label -->
<input type="email" placeholder="Email address">
<!-- Screen readers may announce the placeholder, but many skip it -->
<!-- User cannot see the field purpose while typing -->

<!-- GOOD: -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">

Визуально скрытые подписи

Если в дизайне нет видимой подписи, скройте её визуально, но сохраните для программ чтения с экрана:

<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">

/* sr-only utility class: */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

Быстрая проверка

Как связать подпись с полем с помощью явной связи?

Итог: доступность label

Основные сведения о подписях:

  • Каждому полю всегда нужна подпись
  • <label for="id"> — явная связь
  • Поле внутри подписи — неявная связь
  • aria-labelledby связывает подпись с любым элементом по его id
  • aria-label — для кнопок только со значком, без видимого текста
  • <fieldset> + <legend> — для групп элементов управления

Часто задаваемые вопросы

Урок «Элемент label и доступность» бесплатный?

Да — полный текст урока «Элемент label и доступность» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Элемент label и доступность»?

Связывайте подписи с полями input для поддержки программ чтения с экрана Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Элемент label и доступность»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Элемент form: action, method и enctype
  2. Типы input: text, password, email, number и tel
  3. Элемент label и доступность
  4. Элемент button: submit, reset и button
← Назад к HTML Academy