Accessibility стандарты

Naive UI — это современная библиотека компонентов для Vue 3, ориентированная на высокую кастомизацию и удобство использования. Одним из ключевых аспектов её дизайна является соблюдение стандартов доступности (Accessibility, a11y). Каждый компонент Naive UI проектируется с учетом требований WCAG 2.1, что обеспечивает корректное взаимодействие пользователей с различными ограничениями: слабовидящих, людей с нарушениями моторики и пользователей, использующих вспомогательные технологии.

Поддержка ARIA атрибутов

Большинство интерактивных компонентов Naive UI автоматически включают необходимые ARIA атрибуты, такие как role, aria-label, aria-labelledby, aria-describedby.

Пример использования:

<n-button aria-label="Отправить форму">
  Отправить
</n-button>
  • aria-label обеспечивает корректное озвучивание кнопки при использовании экранных читалок.
  • В компонентах с динамическим содержимым, например n-modal, Naive UI автоматически управляет фокусом и добавляет aria-modal="true".

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

Важной частью accessibility является логика фокусировки. В Naive UI реализовано:

  • Фокус на открытие модальных окон: при открытии n-dialog фокус автоматически устанавливается на первый интерактивный элемент внутри окна.
  • Возврат фокуса: после закрытия модального окна фокус возвращается на элемент, с которого было инициировано открытие.
  • Keyboard navigation: все компоненты поддерживают навигацию с клавиатуры, включая табуляцию, стрелки и горячие клавиши.

Пример модального окна с управлением фокусом:

<n-dialog v-model:show="isOpen" title="Подтверждение">
  <template #default>
    <p>Вы действительно хотите удалить элемент?</p>
    <n-button @click="confirm">Да</n-button>
    <n-button @click="isOpen = false">Нет</n-button>
  </template>
</n-dialog>

Компоненты формы и доступность

Naive UI предоставляет набор интуитивно доступных компонентов форм, включая n-input, n-select, n-checkbox, n-radio-group. Особенности:

  • Метки и ассоциация с полями: все компоненты поддерживают связывание label с полем через for или атрибут aria-labelledby.
  • Ошибки и уведомления: сообщения об ошибках выводятся с использованием aria-invalid и aria-describedby, что позволяет экранным читалкам правильно интерпретировать статус поля.

Пример доступного текстового поля с ошибкой:

<n-form-item label="Имя пользователя" :feedback="errorMessage">
  <n-input v-model="username" :status="errorMessage ? 'error' : 'default'" />
</n-form-item>

Навигация и взаимодействие через клавиатуру

Все компоненты Naive UI проектируются с учетом полной клавиатурной доступности:

  • n-menu и n-dropdown поддерживают навигацию стрелками и выбор элементов через Enter.
  • n-tabs позволяют переключаться между вкладками с помощью стрелок и табуляции.
  • В n-date-picker и n-time-picker реализована навигация по календарю и времени с клавиатуры.

Темизация и контраст

Доступность не ограничивается только навигацией и ARIA. В Naive UI предусмотрены инструменты для соблюдения цветового контраста:

  • Тема по умолчанию обеспечивает контраст текста минимум 4.5:1 на фоне.
  • Пользователь может настраивать темы, сохраняя высокий контраст для слабовидящих.

Пример кастомной темы с увеличенным контрастом:

const theme = {
  common: {
    primaryColor: '#0055ff',
    textColor1: '#000000',
    textColor2: '#333333',
  }
}

createApp(App).use(naive, { theme })

Скрытый контент и screen readers

Для элементов, которые не должны отображаться визуально, но должны быть доступны для экранных читалок, Naive UI поддерживает класс visually-hidden.

Пример:

<span class="visually-hidden">Дополнительная информация для экранного читалки</span>

Проверка и тестирование

Для поддержания стандартов accessibility рекомендуется:

  • Использовать инструменты автоматической проверки, такие как axe-core или Lighthouse.
  • Тестировать компоненты с клавиатурой и экранными читалками.
  • Обеспечивать текстовые альтернативы для всех визуальных элементов (иконки, изображения, графики).

Итоговые ключевые моменты

  • ARIA и роли встроены в компоненты Naive UI.
  • Фокусировка и клавиатурная навигация настроены по умолчанию.
  • Формы и сообщения об ошибках соответствуют WCAG 2.1.
  • Темизация позволяет поддерживать высокий контраст.
  • Скрытые элементы доступны для screen readers через visually-hidden.

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

Оглавление