Инклюзивность

Доступность
без исключений

Мы не считаем a11y «опцией для галочки». Наш брутальный интерфейс спроектирован так, чтобы быть максимально читаемым и управляемым для всех пользователей, независимо от их возможностей.

Демонстрация интерфейса с высокой контрастностью и фокусом клавиатуры
Философия

Брутализм — это
честность интерфейса

Сложные градиенты и полупрозрачные слои часто убивают читаемость. Zenvy использует жесткие границы и высокую контрастность, что делает контент доступным для людей с когнитивными нарушениями и слабым зрением «из коробки».

Мы не скрываем структуру. Четкая иерархия заголовков, видимые состояния фокуса и семантическая разметка — это фундамент, на котором строится наш дизайн-система.

  • 01. Семантический HTML5
  • 02. Управление с клавиатуры
  • 03. ARIA-атрибуты там, где нужно

Технические стандарты

Наши компоненты проходят автоматизированное тестирование на каждом этапе разработки.

⌨️

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

Полная поддержка клавиш Tab, Shift+Tab, Esc и стрелок. Мы видим фокус: жирная обводка 2px и сдвиг тени, чтобы пользователь всегда знал, где он находится. Никаких ловушек фокуса.

👂

Поддержка скринридеров

Логичная структура заголовков (h1-h6), правильные лейблы для форм и описания для иконок. Тестировалось с NVDA, JAWS и VoiceOver на macOS. Интерфейс описывает себя сам.

🎨

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

Соответствие стандарту WCAG 2.1 уровня AA и AAA. Основной текст имеет коэффициент контрастности 12:1 на светлом фоне. Мы используем темно-угольный цвет, а не мягкий серый.

AA
Уровень WCAG
12:1
Контраст текста
100%
Клавиатурный доступ
0
Ошибок Axe
Интеграция

Внедрите доступность
в свой продукт

Вам не нужно переписывать код. Просто подключите наши компоненты, и ваш интерфейс станет доступным. Мы предоставляем готовые паттерны для сложных случаев, таких как модальные окна, выпадающие списки и карусели.

<button class="zenvy-btn">   Активная кнопка </button>

Каждый элемент автоматически получает aria-label и tabindex при необходимости.

Частые вопросы по a11y

Работает ли это на мобильных устройствах? +
Да. Мы учитываем минимальные размеры зон касания (48x48px) и отключаем hover-эффекты на устройствах с тачскрином, чтобы не блокировать контент.
Соответствует ли система WCAG 2.2? +
Мы следуем рекомендациям WCAG 2.1 и постоянно обновляем компоненты под критерии 2.2, включая улучшенную поддержку движущегося контента.
Как проверить контрастность самостоятельно? +
Мы предоставляем плагин для Figma и веб-инструмент, который показывает коэффициент контрастности в реальном времени при выборе цветов из нашей палитры.