Специальные возможности в CHI Tickets
CHI Tickets спроектирован так, чтобы им могли пользоваться все, включая людей, полагающихся на ассистивные технологии. В этой статье описаны встроенные в платформу функции специальных возможностей и способы использовать их по максимуму.
Навигация с клавиатуры
Любая часть CHI Tickets доступна с одной лишь клавиатуры, без мыши и сенсорного экрана:
- Tab — перемещает фокус вперёд по интерактивным элементам (ссылки, кнопки, поля форм).
- Shift + Tab — перемещает фокус назад по интерактивным элементам.
- Enter или Space — активирует текущую кнопку или ссылку в фокусе.
- Стрелки — навигация внутри выпадающих списков, групп радиокнопок и других составных элементов управления.
- Escape — закрывает модальные диалоги и всплывающие окна.
Весь путь оформления заказа — от выбора билетов до оплаты — проходится только клавиатурой. Это включает навигацию по многошаговому процессу (Билеты, Дополнительные опции, Индивидуальные вопросы, Контактные данные, Оплата и Подтверждение).
Индикаторы фокуса
При навигации с клавиатуры вокруг активного элемента появляется заметный индикатор фокуса (обычно рамка или подсветка). Этот индикатор:
- чётко показывает выбранный элемент, поэтому всегда понятно, где вы находитесь на странице;
- движется по логическому порядку табуляции, совпадающему с визуальным макетом страницы (слева направо, сверху вниз);
- оформлен с учётом требований контрастности WCAG 2.1, благодаря чему виден и на светлых, и на тёмных фонах;
- применяется ко всем интерактивным элементам: кнопкам, ссылкам, полям форм, выпадающим спискам и вкладкам.
Поддержка скринридеров
CHI Tickets построен на семантическом HTML и ARIA-атрибутах (Accessible Rich Internet Applications) для совместимости с популярными скринридерами, включая:
- VoiceOver (macOS и iOS)
- NVDA (Windows)
- TalkBack (Android)
- JAWS (Windows)
Ключевые реализации доступности:
| Возможность | Реализация |
|---|
| Структура страницы | Правильная иерархия заголовков (h1, h2, h3), чтобы скринридеры могли перемещаться по заголовкам |
| Подписи полей форм | У всех полей форм есть связанные подписи, озвучиваемые скринридером при получении фокуса |
| Подписи кнопок | Кнопки содержат описательный текст или ARIA-подписи, объясняющие их назначение |
| Alt-текст изображений | Изображения мероприятий снабжены альтернативными текстовыми описаниями |
| Живые области | Динамические обновления (например, сообщения об ошибках и предупреждения о запасах) озвучиваются скринридерами с помощью ARIA live regions |
| Ориентиры | Разделы страницы размечены ARIA-ориентирами (навигация, основной контент, подвал) для быстрой навигации |
ARIA-метки и роли
ARIA-атрибуты широко используются в CHI Tickets там, где один визуальный дизайн не передаёт контекст:
- aria-label — доступные имена для элементов без видимых текстовых подписей (например, кнопок с иконками).
- aria-describedby — связывает поля форм с подсказками или сообщениями об ошибках, чтобы скринридер зачитывал оба текста вместе.
- aria-required — указывает, какие поля форм обязательны при оформлении заказа.
- aria-invalid — помечает поля с ошибками валидации, чтобы скринридер сообщил об ошибочном состоянии.
- role-атрибуты — назначают правильные роли кастомным компонентам интерфейса (например,
role="tablist" для вкладок «Предстоящие»/«Текущие», role="alert" для сообщений об ошибках).
Адаптивный дизайн
CHI Tickets использует полностью отзывчивую вёрстку, подстраивающуюся под любой размер экрана и масштаб:
- Мобильные устройства, планшеты и десктопы — интерфейс корректирует макет под экран, оставаясь удобным на всех устройствах.
- Масштабирование текста — контент остаётся читабельным и работоспособным при увеличении масштаба браузера до 200% и более.
- Touch-цели — кнопки и интерактивные элементы имеют размеры по минимальным рекомендациям для касаний (не менее 44×44 CSS-пикселя), чтобы легко нажимались на сенсорных экранах.
- Reflow — контент переупорядочивается под область просмотра без горизонтальной прокрутки при стандартных уровнях масштаба.
Цвет и контрастность
- Контраст текста — текст и интерактивные элементы соблюдают коэффициенты контрастности WCAG 2.1 AA (не менее 4,5:1 для обычного текста и 3:1 для крупного).
- Информация не только цветом — данные никогда не передаются исключительно цветом. Например, распроданные билеты меняют цвет и получают текстовый бейдж «Распродано».
- Предупреждения о малом остатке включают и визуальный индикатор, и поясняющий текст.
Уменьшенная анимация
Для пользователей, предпочитающих уменьшенную анимацию (медиа-запрос prefers-reduced-motion в настройках операционной системы), CHI Tickets:
- сводит к минимуму или отключает анимации и переходы;
- обеспечивает работу всей критичной функциональности без взаимодействий, построенных на движении.
Советы для наилучшего опыта
- Используйте современный браузер — свежие версии Chrome, Firefox, Safari и Edge дают лучшую поддержку специальных возможностей.
- Обновляйте свой скринридер — новые версии лучше поддерживают ARIA-атрибуты и современные веб-стандарты.
- Включите навигацию с клавиатуры — в macOS откройте «Системные настройки > Клавиатура» и включите «Навигацию с клавиатуры», чтобы перемещаться по Tab через все элементы управления в Safari.
- Регулируйте масштаб при необходимости — встроенный зум браузера (Ctrl/Cmd + Plus) увеличит текст и элементы интерфейса.
- Сообщайте о проблемах — столкнулись с барьером доступности в CHI Tickets, напишите в поддержку CHI. Обратная связь помогает улучшать платформу для всех пользователей.
Совет: Если вам нужна помощь с покупкой билетов или особые требования к самому мероприятию (например, доступ для колясок или сурдоперевод), свяжитесь с организатором мероприятия напрямую через страницу события.