Насколько доступен для незрячих интерфейс Open Academy (Telegram Mini App)? Разбираю в статье. Также даю рекомендации по улучшению удобства использования - как для незрячих, так и для обычных пользователей.

Я давно слежу за Open Academy и считаю, что идея классная: обучение финансам прямо в Telegram.
Они сделали мини-приложение с курсами, квестами и заданиями, а также игру Royale.
Поэтому решил сделать обзор доступности интерфейса, чтобы команда могла улучшить продукт.

Если кратко:
Большинство разделов доступны, но есть UX-моменты, где незрячий пользователь "теряется".

Приведу несколько примеров:

1. У кнопок с иконками часто нет названий (скринридер озвучивает "кнопка"): закрытие модалок, кнопки листания историй, кнопка поиска, кнопки уроков.

2. При открытии модалок курсор не переводится внутрь окна. Приходится вручную искать, что они появились.

3. В процессе обучения слишком много вложенных модальных окон:
окно со списком уроков, окно с информацией после клика по кнопке урока, окно со слайдами, окно с завершением после их прохождения.

4. Контент уроков (изображения с текстом) недоступен - скринридер видит что-то типа "графика info block 1008".

Из предложений по улучшению:
- Добавить aria-label на кнопки и alt на изображения.
- Делать структуру заголовков (h2 → h3), чтобы можно было удобно перемещаться.
- tabIndex и .focus() - переводить курсор в модалку при открытии.
- Упростить процесс обучения - убрать лишние модальные окна.
- Добавить распознавание текста изображений (AI OCR) для слайдов уроков.

Порадовало:
✔ Квизы — доступны и озвучиваются корректно.
✔ Royale-игра доступна примерно на 90%.

Остальные подробности по ссылке ниже:
📄 Читать статью на Teletype.

Буду рад распространению статьи: это важно для увеличения моей популярности.


P. S. В OA запустили курс по Bitget wallet.
До 3 ноября вы можете принять участие и получить ончейн сертификат + призы (500 USD, 500 OA).
Открыть курс и изучать.

Хорошего дня!

😎 Незрячий web3 программист (подписаться)
Чат | бот