Доступность

lh-ui-plus стремится обеспечивать доступный интерфейс для пользователей по всему миру.

Навигация с клавиатуры

Все интерактивные компоненты поддерживают управление с клавиатуры:

Клавиша	Действие
Tab	Переход между элементами, получающими фокус
Enter / Space	Активация кнопки / переключателя
Escape	Закрытие всплывающих слоёв Dialog / Select
Arrow Up/Down	Перемещение по вариантам Select / Cascader

ARIA-атрибуты

Компоненты выводят ARIA-атрибуты по необходимости (ниже показан реальный результат рендеринга):

<!-- Button в отключённом состоянии: нативный disabled, пропускается при обходе Tab -->
<button disabled>...</button>

<!-- Switch: button + role/aria-checked -->
<button role="switch" aria-checked="false">...</button>

<!-- Checkbox: нативный input, семантику обеспечивает подпись -->
<input type="checkbox" />

<!-- Dialog: aria-modal + aria-label указывает на заголовок -->
<div role="dialog" aria-modal="true" aria-label="Заголовок диалога">
  ...
</div>

Нативная семантика в приоритете: Button использует нативный disabled, а Checkbox — нативный <input type="checkbox">, без дублирующих aria-disabled / role="checkbox" — наслоение избыточных ARIA на нативные элементы нарушает спецификацию.

Программы чтения экрана

• Кнопкам только с иконкой нужно явно передавать aria-label (см. раздел с рекомендациями ниже)
• Кнопка закрытия Dialog поставляется с aria-label="close"
• Компоненты пропускают нативные атрибуты: все неразобранные свойства попадают на корневой элемент, при необходимости можно добавить aria-*

Контрастность цветов

Цвета текста и акцентные цвета подобраны под цель WCAG 2.1 AA (обычный текст ≥ 4.5:1, крупный текст и нетекстовые элементы ≥ 3:1); при низконасыщенной палитре в китайском стиле рекомендуется использовать уровни --lh-text-color-* из раздела Настройка темы, а не подбирать цвета самостоятельно — это гарантирует безопасный контраст.

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

• Корневой элемент получает единое кольцо фокуса :focus-visible: отображается при навигации с клавиатуры и не отображается при щелчке мышью
• Всплывающие слои Dialog / Select закрываются по Escape
• Работоспособность с клавиатуры: элементы, получающие фокус, являются нативными <button> / <input>, поэтому обход по Tab работает из коробки

Фокус-ловушка и восстановление фокуса (перемещение фокуса в Dialog при открытии и возврат на кнопку-триггер после закрытия) пока не реализованы — следите за прогрессом в Issue.

Рекомендации по разработке

Добавление aria-label компоненту

<LhButton aria-label="Закрыть диалог" @click="close">
  <LhIcon name="close" />
</LhButton>

Оповещения через live-область

<script setup lang="ts">
import { ref } from 'vue'
const message = ref('')
</script>

<template>
  <div aria-live="polite">{{ message }}</div>
</template>

Skip Navigation

<a href="#main" class="skip-link">Перейти к основному содержимому</a>

Инструменты тестирования

Для проверки доступности рекомендуются следующие инструменты:

• axe DevTools — браузерное расширение
• WAVE — Web Accessibility Evaluation Tool
• lighthouse — встроенный аудит доступности

---

Доступность — это не дополнительная функция, а базовое право человека. — Web Accessibility Initiative (WAI)