Статус оплаты не доходит до пользователя
Хабр пишет, что при обновлении статуса оплаты экранный диктор может не сообщить об этом пользователю — даже если текст на экране изменился. Проблема в том, что интерфейс не информирует о смене состояния в доступной форме.
Пользователь, который слышит интерфейс через скринридер, может не узнать, что оплата подтверждена. Статус обновился, но фокус остался на кнопке, а новое сообщение — в другом месте. Скринридер не объявил об изменении, потому что не был уведомлён правильно.
Как это устроено — и почему не работает
Система сообщает об изменении через текст, но не использует ARIA-роли, которая говорит: «это состояние, и оно важно для пользователя». Без `role="status"` и `aria-live="polite"` экранный диктор не реагирует на изменения. Даже если текст на экране поменялся, пользователь остаётся в темноте.
Что изменилось — раньше просто не думали
Раньше доступность воспринималась как дополнительная функция: «если кто-то не видит, пусть пойдёт в офис». Сейчас это часть пользовательского опыта. Если интерфейс не работает с экранными дикторами, он работает не для всех.
Кого это касается — и как понять, что это про вас
Если у вас интернет-магазин, маркетплейс или сервис в индустрии красоты с оплатой, это про вас. Любой шаг, где пользователь ждёт подтверждения — оплата, заказ, доступ к материалу — должен быть доступен. Если клиент с нарушением зрения не получает уведомление, он не сможет перейти к следующему действию.
Что с этим делать — как подойти системно
Сначала — проверить, как реагируют экранные дикторы на изменения. Затем — добавить `role="status"` к элементам, которые меняются динамически. Не забывать про `aria-atomic="true"`, чтобы сообщение передавалось целиком. Ссылки и действия — выносить за пределы live region. Проверять, что фокус не прыгает, а пользователь может добраться до следующего шага.
Что мы с этим делаем — и как это работает в реальности
Мы в Cetera работаем с 2002 года, более 1000 проектов. В каждом из них, где есть интерактивные состояния — оплата, заказ, доступ — проверяем, как они работают с экранными дикторами. Убеждаемся, что изменения в интерфейсе передаются без прерывания. Если хотите понять, как это выглядит у вас, — давайте обсудим вашу задачу.
Это часть нашей работы — Поддержка и развитие. Поддерживаем сайты всех типов на CMS и фреймворках: Cetera CMS, Laravel, Yii2, InSales, «1С-Битрикс», Bitrix24, WordPress, WooCommerce, Ecwid, OpenCart, Drupal, Joomla, Magento2, Shopify и самописные системы на PHP и Python. Инфраструктура, развитие и продвижение включены. Поддержка и развитие
Автор: Святослав Семенов из Cetera Labs