Чайный сад на 12 столиков в Кадыкёе (Стамбул) получил 240 новых посетителей в месяц после перехода на QR-меню, совместимое с VoiceOver и TalkBack, и репоста от Турецкой ассоциации слепых.
Основы WCAG 2.2 AA
Экранным дикторам нужна семантическая разметка: названия — h3, цены через aria-describedby, иконки аллергенов с aria-label="содержит глютен". Контраст не ниже 4.5:1, кнопки 44×44 px, логичный таб-порядок.
Эмодзи без ARIA-метки слепой пользователь не услышит — добавляйте подписи к каждому значку.
ARIA Live для корзины
При добавлении товара область role="status" или aria-live="polite" произносит: «Чечевичный суп добавлен, всего 3 позиции». Для ошибок используйте role="alert".
ToastProvider в thMenu по умолчанию aria-live="polite". Пустое состояние аллергенов даёт безопасный fallback «Спросите официанта».
Тестирование перед запуском
Включите VoiceOver на iPhone или TalkBack на Android и пройдите весь путь заказа. Паузы дольше 1 секунды означают проблемы с фокусом. Axe DevTools или WAVE покажут грубые нарушения за минуту.
Обязательно привлеките реального незрячего тестировщика — автоматика не видит контекста.
FAQ
Нужна отдельная аудиоверсия? Нет, корректный HTML обслуживает всех.
Подключать свой TTS? Не нужно, экранный диктор сам произносит.
Есть ли сертификация WCAG? Официальной нет, ближе всего отчёт VPAT.
Было полезно? Поделитесь.
Похожие статьи
Что такое QR-меню? Полное руководство для ресторанов
QR-меню позволяет гостям мгновенно получить доступ к вашей карте блюд со смартфо…
Переход с бумажного меню на цифровое QR-меню: пошаговое руководство
Хотите перейти на QR-меню, но не знаете с чего начать? Это руководство охватывае…
Геотаргетированные QR-меню: разные языки по IP посетителя
Как 180-местный all-inclusive отель в Анталье направляет один QR на турецкое, не…