> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Доступность

> Добавляйте метки элементам управления, сохраняйте поведение клавиатуры и тестируйте доступность интерфейсов Twenty UI.

## Обзор

Перенесенные интерактивные компоненты используют примитивы Base UI для семантики и поведения клавиатуры. Ваше приложение по-прежнему предоставляет понятные метки, описания, сообщения об ошибках и порядок фокуса.

## Добавляйте метки ко всем элементам управления

Используйте `Field.Label` с полем ввода, чтобы связать видимую метку с элементом управления. `Field.Description` предоставляет поясняющий текст:

```tsx theme={null}
import { Field, Input } from 'twenty-ui/primitives/input';

export const EmailField = () => (
  <Field.Root>
    <Field.Label>Email</Field.Label>
    <Input type="email" name="email" required />
    <Field.Description>
      We send account updates to this address.
    </Field.Description>
    <Field.Error>Enter a valid email address.</Field.Error>
  </Field.Root>
);
```

Используйте [VisuallyHidden](https://docs.twenty.com/ru/ui/primitives/accessibility/visually-hidden.md), когда вспомогательный текст должен оставаться доступным для вспомогательных технологий, не отображаясь.

Заполнители дополняют метки, а не заменяют их. Для элемента управления без видимого текста укажите доступное имя с помощью `aria-label` или `aria-labelledby`.

## Сохраняйте нативное поведение

Используйте свойства состояния и изменения компонента, например `checked` и `onCheckedChange` у `Switch`. Сохраняйте индикаторы фокуса видимыми. При использовании `render` для замены элемента сохраняйте ref, обработчики событий и атрибуты, которые компонент передаёт ему.

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

## Тестируйте весь интерфейс

Проверяйте навигацию с клавиатуры, метки, объявления об ошибках, перемещение фокуса в оверлеях и масштабирование в контексте использования компонента. Проверяйте контраст в обеих палитрах и после применения пользовательских переопределений токенов.

Истории Twenty UI содержат проверки взаимодействия и автоматические проверки доступности. В некоторых историях проверки контраста цветов всё ещё отложены, поэтому эти проверки не подтверждают полное соответствие приложения требованиям доступности.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.