Доступность

Как мы разрабатываем для пользователей клавиатуры, экранных дикторов, слабовидящих и low-tech. Честный датированный срез.

Мы пишем эту страницу так же, как и остальная часть сайта: что работает, что нет, и как это проверить самостоятельно. Она датирована, потому что доступность, движущаяся цель. Мы повторно тестируем после каждого крупного выпуска.

Официальное заявление о доступности

Целевой стандарт

WCAG 2.2 AA на протяжении всего опыта. Обработка AAA для внешнего вида фокуса (толстые кольца с высоким контрастом, не скрытые) и для разметки форм + восстановления после ошибок. Отслеживается по Рекомендации W3C, а не по перефразировке.

Последний внутренний аудит

2026-04-19. Ручная проверка нашей командой главной страницы, print-size, хаба /standards/ + 9 авторитетных страниц и 45 посадочных страниц платёжных схем.

Внешний аудит

Заказан, отчёт ожидается. Будет опубликован на /accessibility/audit/ с примечаниями по исправлению, недостатки не скрыты, без избирательного подхода.

Периодичность повторного тестирования

Ежемесячная выборочная проверка + полная ручная проверка после любых крупных изменений UI. Автоматические проверки (линтинг контрастности, сканирование новых критериев WCAG 2.2) выполняются при каждом развёртывании.

Контакт + SLA

hello@abundera.ai, мы подтверждаем отчёты о доступности в течение 2 рабочих дней, проводим сортировку в течение 5 дней и рассматриваем блокировщики клавиатуры / программы чтения с экрана / когнитивные блокировщики как приоритетные проблемы (исправляем раньше работы над функциями).

Соответствие WCAG 2.2 AA по критерию успеха

Новые в версии 2.2 критерии, которые мы активно отслеживаем. Статус отражает то, что мы проверили внутренне; внешний аудит заменит его.

Поддержка анимации и принудительных цветов

• prefers-reduced-motion: reduce, плавание фонового шара и переходы затухания подавляются. Функциональные переходы остаются короткими. Проверено с macOS Reduce Motion и отключёнными Windows "Показать анимации".
• forced-colors: active (Режим высокого контраста Windows), кольца фокуса используют системный цвет Highlight; границы наследуют системный CanvasText. Проверено в Edge на Windows 11 High Contrast.

Известные ограничения

• JAWS ещё не тестировался. Следующий раунд AT нацелен на JAWS в Edge на Windows 11.
• Конструктор визиток ориентирован на мышь для предварительного просмотра с перетаскиванием. У каждого элемента управления есть клавиатурная альтернатива, но петля обратной связи в реальном времени всё ещё визуальная. Цветовые поля, сетка пресетов и поля hex теперь имеют явные привязки ARIA (2026-04-19).
• Отчёт внешнего аудита ожидается. Самоподтверждённый статус в таблице выше будет заменён выводами аудитора при получении отчёта.
• Некоторые вспомогательные технологии сторонних производителей (Dragon NaturallySpeaking, речь в текст на Android) не входят в нашу матрицу регрессии; мы принимаем отчёты сообщества и исправляем по тикетам.

Журнал изменений доступности

• 2026-04-19 (вечер), Исправлено двойное срабатывание живой области TalkBack: aria-live="polite" удалён из обёртки #qr-preview; объявления теперь поступают только от значка сканируемости role="status", один раз за генерацию. Модальное окно BCD: селекторы цвета получили правильные привязки <label for> (Фон, Текст, Акцент, Градиент); контейнер сетки пресетов получил role="group" + aria-label. Таблицы доступности получили <caption> + scope="col"/"row", WCAG 2.2 AA + матрица AT теперь правильно объявляются на VoiceOver, NVDA и TalkBack.
• 2026-04-19 (утро), Обновлены индикаторы фокуса (3 px + резервный box-shadow). Добавлена поддержка forced-colors + prefers-reduced-motion. Аудит размера целей: .saved-profile-delete, .type-search-clear, .compat-toggle-btn увеличены до ≥ 28 px. Исправлен пропуск уровня заголовка (подзаголовки vCard/MECARD h4 → h3). Опубликовано официальное заявление WCAG 2.2 AA + матрица AT.
• 2026-04-18, Задокументирован ручной базовый проход WCAG 2.2 AA. Полоса доверия из четырёх колонн свёрнута для более чёткой иерархии.
• 2026-03-08, Опубликована начальная страница /accessibility/.

Наши обязательства

• Полная навигация с клавиатуры. Каждый элемент управления генератора, каждое модальное окно и каждый поток экспорта доступен без мыши.
• Видимые состояния фокуса. Сфокусированные поля ввода, кнопки и ссылки показывают чёткое кольцо. Мы не полагаемся только на цвет.
• Метки для каждого поля. Поля формы имеют связанные элементы <label> или атрибуты aria-label. Текст-заполнитель никогда не используется как единственная метка.
• Живые области ARIA для предварительного просмотра QR и уведомлений. Программы чтения с экрана слышат "QR создан" и сообщения уведомлений при их появлении, а не только когда фокус перемещается к ним.
• Текстовые альтернативы для кнопок только с иконкой. aria-label на каждой кнопке только с SVG.
• Независимое от цвета значение статуса. Значки сканируемости и чипы совместимости сочетают цвет с глифом и текстовой меткой.
• Явные названия форматов экспорта. Кнопки загрузки говорят "Скачать PNG", "Скачать SVG" и т.д., а не просто "Скачать".
• Большие мобильные цели для касания. Интерактивные элементы не менее 44 × 44 CSS-пикселей на неточных указателях, согласно WCAG 2.5.8.
• Уважение к уменьшенному движению. Переходы отключены при prefers-reduced-motion: reduce.

Где мы ещё не дотягиваем

• JAWS ещё не тестировался. Лицензия JAWS получена, слот тестировщика забронирован для следующего раунда AT. Все остальные основные (VoiceOver macOS + iOS, NVDA, Narrator, TalkBack) прошли последнюю регрессию.
• Конструктор визиток по дизайну требует много работы с мышью (перетаскивание, предварительный просмотр на холсте). Для каждого элемента управления существуют клавиатурные альтернативы, но петля обратной связи предварительного просмотра в реальном времени всё ещё ориентирована на визуальное восприятие. Цветовые элементы управления теперь используют правильные привязки <label for> + role="group" на выборщике пресетов (2026-04-19).
• Сложные потоки генератора (пакетный CSV, многошаговый мастер) могут использовать лучшую структуру ссылок перехода. Запланировано.
• Описательные сводки таблиц. Таблицы доступности + совместимости теперь имеют атрибуты <caption> + scope (2026-04-19). Более длинные нарративные сводки на уровне строк для каждой строки ещё запланированы.

Матрица поддержки вспомогательных технологий

Инженерный артефакт, а не PR-заявление. Каждая строка, это реальная комбинация браузер + AT + платформа, с которой мы физически работали. Статус отражает последний ручной проход; предупреждения фиксируют всё, что ещё блокирует полный проход.

Периодичность выпусков: матрица перезапускается против каждого крупного изменения UI. "Пройдено" = нет блокировщиков; оговорки, косметические или узкоскопные регрессии в очереди на следующий выпуск. "Не тестировалось" = мы ещё физически не запускали эту комбинацию, мы говорим об этом вместо того, чтобы пропускать.

Карта клавиатуры

• Tab / Shift+Tab: перемещение вперёд / назад по фокусируемым элементам.
• Enter / Space: активация кнопок и переключателей.
• Клавиши со стрелками: перемещение между вариантами внутри группы переключателей (выбор типа, выбор шаблона, панель вкладок).
• Escape: закрытие модальных окон (конструктор визиток, предполётная проверка, службы печати, обрезка изображения).
• Home / End внутри переполненного меню для перехода к первому / последнему элементу.

Внутренний аудит, 2026-04-19

Ручной проход WCAG 2.2 AA против главной страницы, /print-size/, нового хаба /standards/ + 9 авторитетных страниц и 45 посадочных страниц платёжных схем (наследующих от общего шаблона). Что мы проверили, что исправили и что остаётся открытым:

Подтверждено как пройденное

• Цель ссылки перехода существует, ссылка перехода (href="#generator") разрешается в видимый элемент на каждом варианте страницы.
• Видимые стили фокуса, :focus-visible объявлен глобально с контуром 2px, плюс переопределения для каждого поля с цветной границей + тенью. Подтверждено аудитом CSS в строках 34 и 88 файла site/css/style.c17bfd85.css.
• Все поля формы имеют метки, каждый <input> / <select> / <textarea> в генераторе имеет явный <label for="..."> или обёртывающий <label>. Заполнитель в роли метки не используется нигде.
• Кнопки имеют доступные имена, каждая <button> имеет текстовое содержимое или aria-label. Кнопки только с SVG (гамбургер, поделиться, установить) все несут aria-label.
• Декоративные SVG помечены как скрытые, aria-hidden="true" на каждом декоративном значке, чтобы программы чтения с экрана пропускали их вместо объявления геометрии.
• Правильные роли ARIA, role="radiogroup" на выборе типа с role="radio" + aria-checked на каждом варианте; role="tablist" / role="tab" + aria-selected на вкладках панели.
• Контраст текста, основной текст #f5f5f5 на #08090a (≈ 17:1, WCAG AAA). Приглушённый текст #a3a3a3 на том же фоне ≈ 8:1 (выше AAA 7:1).
• Переключатель языка имеет aria-label="Language", хотя видимая метка подразумевается.

Исправлено в этом проходе

• Пропуск уровня заголовка, три подзаголовка внутри разделов дополнительных полей vCard / MECARD были <h4> под <h2> без промежуточного <h3>. Инструменты схемы программы чтения с экрана пометили это как "пропущенный уровень". Изменено на <h3>, чтобы схема читала h1 → h2 → h3 → h3 чисто.

Известные ограничения

• Полное сканирование Axe / NVDA / VoiceOver требует браузера + AT, которые мы не можем запустить из конвейера сборки. Ежемесячный ручной браузерный проход запланирован.
• Независимый сторонний аудит заказан (см. заполнитель /accessibility/audit/). Отчёт будет опубликован по прибытии, даже если содержит находки.
• Сочетание клавиш "/" для командной палитры является незначительным риском коллизии на страницах с полями поиска. Мы используем preventDefault() только когда фокус находится вне поля ввода; задокументировано, но ещё не проверено с AT.

Сообщить о проблеме

Если что-то недоступно с клавиатуры, неправильно помечено или иным образом непригодно для использования в вашей конфигурации, отправьте электронное письмо на hello@abundera.ai. Укажите ваш браузер, ОС, AT и конкретный поток. Мы рассматриваем ошибки доступности как приоритетные проблемы.

Последняя проверка: 2026-04-19. Следующая проверка: после следующего крупного изменения UI.