Доступность и label

Доступность (Accessibility, a11y) — фундаментальная характеристика современных интерфейсов. Она определяет, насколько эффективно пользователь может взаимодействовать с элементами интерфейса независимо от способа ввода, физических ограничений или используемых вспомогательных технологий.

Ключевые цели доступности:

  • корректная работа со скринридерами
  • удобная навигация с клавиатуры
  • понятная семантика элементов
  • корректные ARIA-атрибуты
  • ясная связь между элементами интерфейса

Библиотека Radix UI проектировалась как accessibility-first система компонентов. Практически все компоненты библиотеки уже включают:

  • ARIA-атрибуты
  • управление фокусом
  • поддержку клавиатуры
  • правильную семантику

Одним из ключевых элементов доступности является label, обеспечивающий связь между элементом интерфейса и его описанием.

Проблема идентификации элементов формы

Любой интерактивный элемент формы должен быть понятно обозначен.

Если элемент не имеет корректной подписи, возникают проблемы:

Проблема Последствие
Нет текстовой подписи Скринридер не может объяснить назначение элемента
Label не связан с элементом Пользователь теряет контекст
Неверная семантика Нарушается навигация по форме
Маленькая область клика Снижается удобство взаимодействия

Правильная разметка HTML решает эту проблему через элемент <label>.

Базовый пример HTML

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

Связь осуществляется через:

  • for в label
  • id у элемента формы

Скринридер будет объявлять элемент как:

Email, edit text

Компонент Label в Radix UI

Radix UI предоставляет специальный компонент:

@radix-ui/react-label

Он является обёрткой над стандартным <label>, но добавляет:

  • улучшенную доступность
  • совместимость с другими компонентами Radix
  • корректную работу с pointer events
  • поддержку вложенных элементов

Установка

npm install @radix-ui/react-label

Базовое использование

import * as Label from "@radix-ui/react-label";

function Form() {
  return (
    <div>
      <Label.Root htmlFor="email">
        Email
      </Label.Root>

      <input id="email" type="email" />
    </div>
  );
}

Особенности

Label.Root:

  • рендерит HTML <label>
  • принимает htmlFor
  • автоматически поддерживает доступность

Увеличение области взаимодействия

Одно из ключевых преимуществ <label> — расширение области клика.

При клике на label:

  • фокус автоматически переходит на поле
  • активируется checkbox или radio

Пример:

<Label.Root htmlFor="terms">
  Accept terms
</Label.Root>

<input id="terms" type="checkbox" />

Клик по тексту Accept terms переключит checkbox.

Это особенно важно для:

  • мобильных устройств
  • пользователей с моторными ограничениями

Вложенная структура Label

HTML допускает вложение элемента формы внутрь label.

Radix UI полностью поддерживает эту модель.

<Label.Root>
  Email
  <input type="email" />
</Label.Root>

Преимущества:

  • не требуется id
  • связь создаётся автоматически
  • упрощается структура

Использование с Checkbox

Один из наиболее распространённых сценариев — работа с чекбоксами.

import * as Checkbox from "@radix-ui/react-checkbox";
import * as Label from "@radix-ui/react-label";

function Example() {
  return (
    <div>
      <Checkbox.Root id="terms" />

      <Label.Root htmlFor="terms">
        Accept terms and conditions
      </Label.Root>
    </div>
  );
}

Поведение

Клик по тексту:

  • переключает checkbox
  • сохраняет корректную доступность
  • правильно объявляется скринридером

Интеграция с другими компонентами Radix

Label часто используется совместно с:

  • Checkbox
  • RadioGroup
  • Switch
  • Slider
  • TextField

Пример со Switch:

import * as Switch from "@radix-ui/react-switch";
import * as Label from "@radix-ui/react-label";

function Notifications() {
  return (
    <div>
      <Label.Root htmlFor="notifications">
        Enable notifications
      </Label.Root>

      <Switch.Root id="notifications" />
    </div>
  );
}

Стилизация Label

Radix не навязывает стили. Компонент легко стилизуется любыми средствами.

CSS

.label {
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

Использование:

<Label.Root className="label" htmlFor="email">
  Email
</Label.Root>

Использование с Tailwind

<Label.Root
  htmlFor="email"
  className="text-sm font-medium text-gray-700"
>
  Email
</Label.Root>

Предотвращение конфликтов pointer events

Одной из проблем label является конфликт pointer-событий при вложенных элементах.

Radix UI решает эту проблему автоматически.

Проблемный пример

<label>
  Click
  <button>Info</button>
</label>

Клик по кнопке может непредсказуемо активировать input.

Radix корректно управляет событиями и предотвращает подобные ошибки.

Поддержка disabled элементов

Если элемент формы отключён (disabled), label должен корректно отражать это состояние.

Пример:

<input id="username" disabled />

<Label.Root htmlFor="username">
  Username
</Label.Root>

Часто добавляется визуальная индикация:

.label-disabled {
  opacity: 0.5;
}

Связь с описанием (Description)

Иногда требуется не только label, но и дополнительное описание.

HTML предоставляет атрибут:

aria-describedby

Пример:

<Label.Root htmlFor="password">
  Password
</Label.Root>

<input
  id="password"
  aria-describedby="password-desc"
/>

<p id="password-desc">
  Must contain at least 8 characters
</p>

Скринридер озвучит:

Password. Must contain at least 8 characters.

Использование aria-labelledby

Иногда label может находиться в другом месте DOM.

В таких случаях используется:

aria-labelledby

Пример:

<p id="title">User name</p>

<input aria-labelledby="title" />

Это полезно в сложных интерфейсах:

  • таблицах
  • модальных окнах
  • кастомных компонентах

Использование нескольких label

HTML допускает несколько label для одного элемента.

Пример:

<label for="email">Email</label>
<label for="email">(required)</label>
<input id="email" />

Скринридер объединяет текст.

Однако на практике это используется редко, так как ухудшает читаемость DOM.

Label и кастомные компоненты

При создании собственных компонентов важно сохранять связь label.

Пример компонента:

function TextField({ id, label }) {
  return (
    <div>
      <Label.Root htmlFor={id}>
        {label}
      </Label.Root>

      <input id={id} />
    </div>
  );
}

Использование:

<TextField id="email" label="Email" />

Ошибки при работе с label

Отсутствие связи

Неправильно:

<label>Email</label>
<input type="email" />

Правильно:

<label htmlFor="email">Email</label>
<input id="email" type="email" />

Использование placeholder вместо label

Плохая практика:

<input placeholder="Email" />

Проблемы:

  • placeholder исчезает при вводе
  • скринридеры читают его непоследовательно
  • ухудшается доступность

Label должен существовать всегда.

Скрытые label

Иногда дизайн не предусматривает видимый label.

В таком случае используется visually hidden подход.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Пример:

<Label.Root className="sr-only" htmlFor="search">
  Search
</Label.Root>

<input id="search" placeholder="Search..." />

Label и управление фокусом

Label играет важную роль в управлении фокусом.

При клике:

label → input.focus()

Это улучшает:

  • доступность
  • UX
  • мобильное взаимодействие

Radix гарантирует корректную передачу фокуса для всех своих компонентов.

Взаимодействие со скринридерами

Правильный label обеспечивает корректное объявление элемента.

Пример объявления:

Email, edit text

Для checkbox:

Accept terms, checkbox, not checked

Без label скринридер может произнести:

Edit text

Пользователь теряет контекст.

Проверка доступности

Корректность label можно проверять инструментами:

  • Lighthouse
  • axe DevTools
  • WAVE
  • Accessibility Inspector

Типичные предупреждения:

  • Form elements must have labels
  • Inputs must have accessible names

Radix UI помогает избежать этих ошибок на уровне компонентов.

Принципы правильного использования Label

Ключевые правила:

1. Каждый элемент формы должен иметь label

Исключения минимальны.

2. Label должен быть связан с элементом

Через:

  • htmlFor
  • вложенную структуру
  • aria-labelledby

3. Label должен быть понятным

Плохой пример:

Input

Хороший пример:

Email address

4. Label должен оставаться видимым

Placeholder не заменяет label.

5. Label должен увеличивать область клика

Особенно для:

  • checkbox
  • radio
  • switch

Архитектурная роль Label в Radix UI

В архитектуре Radix компонент Label выполняет несколько функций:

  • связывает семантику интерфейса
  • улучшает UX взаимодействия
  • обеспечивает доступность
  • интегрируется с интерактивными компонентами

В результате формируется интерфейс, который:

  • корректно работает со скринридерами
  • полностью поддерживает клавиатурную навигацию
  • соответствует стандартам WCAG и ARIA.
Оглавление