Доступность
Руководство по реализации интерфейсов в соответствии со стандартами WCAG 2.1 (уровни AA и AAA).
Контрастные
пары цветов
Визуальная ясность — это не просто эстетика, это требование доступности. Система 'Формли' гарантирует коэффициент контрастности не ниже 4.5:1 для основного текста и 3:1 для крупных заголовков.
Мы используем переменные --color-text-main и --color-surface, которые математически рассчитаны для соответствия стандарту WCAG 2.1 AA. Избегайте использования декоративных цветов для передачи критической информации.
- • Текст на темном фоне: #F2F2F2
- • Вторичный текст: #888888 (только на #080808)
- • Акцентные элементы: HSL(54, 90%, 60%)
Фокусные состояния и навигация
Tab-навигация
Все интерактивные элементы (кнопки, ссылки, поля ввода) должны иметь логический порядок фокуса, соответствующий визуальной иерархии страницы. Порядок tabindex по умолчанию.
Визуальный фокус
Никогда не удаляйте outline без замены. Используйте :focus-visible для создания кастомных рамок (ring) цвета --color-accent шириной 2px.
Ловушки фокуса
В модальных окнах и выпадающих списках фокус должен циклически перемещаться внутри компонента (Trap Focus), предотвращая доступ к фону до закрытия.
Семантика
компонентов
Семантическая верстка — фундамент доступности. Использование правильных HTML-тегов предоставляет контекст скринридерам без лишнего кода.
В системе 'Формли' мы строго разграничиваем роли элементов:
-
Навигация
Используйте
<nav aria-label="Главная">для основных меню. -
Формы
Каждое
<input>должно иметь связанный<label>или атрибутaria-label. -
Интерактив
Используйте
<button>для действий и<a>для переходов. Избегайтеrole="button"наdiv.
<form role="search">
<label for="query">Поиск</label>
<input id="query"
type="search"
aria-placeholder="Введите запрос..."
class="fly-input"
/>
<button type="submit">
Найти
</button>
</form>
Тестирование скринридерами
Регулярно тестируйте компоненты 'Формли' с использованием скринридеров. Убедитесь, что ARIA-атрибуты (aria-expanded, aria-selected) обновляются при изменении состояния интерфейса.
Проверить ваш проект
Используйте автоматизированные инструменты для первичного аудита, но помните: ручное тестирование людьми с ограниченными возможностями — единственный истинный стандарт.