Старая капча имела ряд проблем, включая устаревший дизайн, маленькое изображение, отсутствие обновления картинки и, самое главное, легаси-код, затруднявший внесение изменений. В качестве временного решения были проведены улучшения: обновлен дизайн, увеличена картинка, добавлена возможность обновления и переписан устаревший компонент.
Разработка новой капчи на React позволила избавиться от легаси-кода и использовать UI-библиотеки, что упростило верстку и позволило дизайнерам вносить изменения без проблем. Был сделан акцент на инклюзивности, чтобы капча была доступна слабовидящим и незрячим пользователям.
Для обеспечения доступности была добавлена звуковая капча. Важным было правильно реализовать загрузку звуковой дорожки – только при воспроизведении, а не заранее. Также учитывалась работа со скринридерами. Семантическая вёрстка и атрибуты role и aria-label помогали скринридерам правильно воспринимать элементы.
Управление фокусом внутри модального окна капчи, а также удержание фокуса внутри нее с помощью кастомной табуляции и использование useRef для каждого элемента, были важными элементами при разработке инклюзивной капчи. В процессе решения проблем с табуляцией столкнулись с необходимостью удержания внимания пользователя в пределах модалки и проблемами при наличии нескольких модальных окон. Для решения последней, фокус отслеживался вручную с помощью записи сфокусированного элемента в стейт.
Изображение носит иллюстративный характер
Разработка новой капчи на React позволила избавиться от легаси-кода и использовать UI-библиотеки, что упростило верстку и позволило дизайнерам вносить изменения без проблем. Был сделан акцент на инклюзивности, чтобы капча была доступна слабовидящим и незрячим пользователям.
Для обеспечения доступности была добавлена звуковая капча. Важным было правильно реализовать загрузку звуковой дорожки – только при воспроизведении, а не заранее. Также учитывалась работа со скринридерами. Семантическая вёрстка и атрибуты role и aria-label помогали скринридерам правильно воспринимать элементы.
Управление фокусом внутри модального окна капчи, а также удержание фокуса внутри нее с помощью кастомной табуляции и использование useRef для каждого элемента, были важными элементами при разработке инклюзивной капчи. В процессе решения проблем с табуляцией столкнулись с необходимостью удержания внимания пользователя в пределах модалки и проблемами при наличии нескольких модальных окон. Для решения последней, фокус отслеживался вручную с помощью записи сфокусированного элемента в стейт.
