Перейти к основному содержанию

Обзор

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

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

Используйте Field.Label с полем ввода, чтобы связать видимую метку с элементом управления. Field.Description предоставляет поясняющий текст:
Используйте VisuallyHidden, когда вспомогательный текст должен оставаться доступным для вспомогательных технологий, не отображаясь. Заполнители дополняют метки, а не заменяют их. Для элемента управления без видимого текста укажите доступное имя с помощью aria-label или aria-labelledby.

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

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

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

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