Анализ доступности Open Academy для незрячих + рекомендации по улучшению удобства использования
Я уже давно рассказывал про Open Academy. Напомню, что это Telegram mini app для обучения финансам (в будущем и другим направлениям) прямо в Телеграме и в удобном формате.
Мне нравится проект. Поэтому решил написать обзор доступности, чтоб могли её улучшить.
Оглавление
Введение: технические подробности улучшения доступности
- Если у каких-то элементов есть только иконки, и они важны (есть взаимодействие) добавляйте к ним aria-label="name" атрибут. Это значительно упростит работу;
- Добавляйте tabindex=-1 к модальным окнам и .focus у элементов, на которых надо фиксировать курсор (JS метод);
- Добавляйте alt у изображений;
- Разделяйте контентную часть (тег main) и меню (тег nav);
- Делайте заголовки разного уровня: h2, h3, выделяя разделы страницы.
А теперь к обзору интерфейса бота.
Главная страница
Начнём со стриков:
В Nuts Farm было написано, сколько получаю. Здесь же ничего такого нет. Или мне недоступно. Лучше добавить текстом или написать, какие награды планируются.
Дальше идёт кнопка "Rumi" с местным ИИ. Нажимаю по ней:
Сразу под заголовком (в html) вижу кнопку с меню. После её открытия появляется кнопка "Очистить чат". Лучше назвать её "Действия".
Под строкой "ИИ-АССИСТЕНТ" есть кнопка "BETA". Лучше её назвать "О Rumi (BETA)" или как-то так.
Список промптов нормально озвучивается. Нажимаю "Создать квиз":
В чате появился текст про верный ответ - это удобно. Но вот когда я отправил "Дальше" произошла ошибка при генерации ответа:
Хотя по идее должен был сгенерироваться следующий вопрос.
В идеале стоит добавить кнопку "К следующему вопросу".
Кстати, под полем ввода есть кнопка - она без названия. Лучше именовать её "Отправить".
Также лучше использовать не input type="text", а textarea: иногда запросы к ИИ бывают многострочными. Хотя на данном этапе это и не обязательно, наверное. К тому же не надо, чтоб отправляли большие промпты, нагружающие Rumi.
Story - истории:
Нажимаю по соответствующей кнопке ("Story 20"), и открывается модальное окно.
Что сразу заметно:
- Курсор не попадает в неё. В прочем, как и в других случаях выше. Было бы удобнее, если бы курсор заходил в модалку;
- Кнопки листания историй не подписаны, как и кнопка закрытия модалки. Лучше именовать "Назад", "Вперёд" и "Закрыть". Для инфо: перемещения реализованы в виде "По щелчку" (скорее всего div или подобное), а закрытие - кнопка button или input с type="button".
Ниже на главной идёт поиск. Там кнопка "Найти" под текстовым полем не описана. Также лучше добавить aria-label="Найти".
Ещё ниже - заголовок уровень 2 "Выбери категорию". Но сами категории почему-то уровня 4 (h4). Хотя по логике должны были быть h3. Лучше заменить.
А ещё лучше - сделать просто ul li список со ссылками. А то слушать заголовки перед элементами не очень удобно. Да: можно перемещаться по ссылкам клавишей "k", но не каждый так будет это делать.
В рекомендуемых курсах есть какая-то кнопка под баннером каждого курса. Она не подписана, и я не понимаю назначение: после клика ничего не происходит. Лучше скрыть или назвать.
Доступность каталога курсов
Переходим на страницу "Каталог":
Поиск также без названной кнопки "Найти", а так всё доступно.
Но есть момент, который ухудшает юзабилити:
- Пользователю приходится выбирать одну категорию и смотреть уроки по ней. А если он не уверен, какая интересна, или хочет выбрать несколько? Приходится выбирать, а затем отменять выбор;
- Лучше сделать кнопку "Фильтровать". После клика открывается модальное окно, где отображается список категорий с галочками input type="checkbox". Пользователь выбирает нужные и нажимает "Настроить". После этого появляется список курсов с выбранным.
Выбрал "Инвестиции":
Всё доступно. Единственное, было бы классно видеть и здесь прогресс обучения.
Но как уже сказал, такой выбор достаточно неудобен. Если я понял, что пока неинтересна категория, приходится нажимать "Сбросить":
И появляется весь список. Лучше тогда сразу отображать в таком формате.
А вот я открыл выбор категории по кнопке "Категории":
Лучше, как уже говорил, множественный выбор. Хотя, конечно, возможно стоит проводить A/B тестирование.
Сортировка доступна хорошо.
Страница курса
Выбрал первый - про Bitget wallet:
Здесь под ссылкой "Назад" есть две кнопки:
- Первая не знаю, что делает: после клика ничего видимого не происходило;
- Вторая позволяет поделиться курсом.
Обе не подписаны. Лучше написать названия через aria-label.
Ниже 4.8 и 3621. Лучше добавить, что это. Например, так:
Оценка: 4.8
Учащихся: 3621.
В отзывах по кнопке "Показать все" открывается модальное окно с неподписанной кнопкой "Закрыть".
Процесс обучения рассмотрим отдельно, так как это целый важный отдельный раздел.
Страница "Мои курсы"
- Нет названия у кнопки "Найти";
- Заголовок "Избранное" и курсы в избранном уровня 3. Лучше сделать "Избранное" h2, а курсы h3 или заголовок раздела h3 и курсы h4;
- В списке избранного есть опять кнопка без названия под изображениями;
- Под 4.8 написано число "0" - непонятно, что это;
- Лучше разделять разделы hr (разделителем). Это повысит удобство навигации, а то сейчас слушаешь наличие ссылок - не сразу понимаешь, что это уже не следующий элемент в избранном, а "Завершённые".
В завершённых, в том числе после открытия по ссылке в заголовке всё доступно.
Скажу лишь, что хорошо реализована модалка оставления отзыва: курсор сразу идёт в поле ввода текста. Но минус в том, что нет там тоже кнопки "Закрыть" сверху.
Доступность процесса обучения
Нажал "Продолжить обучение" в каталоге или на странице курса, "Начать заново" в моих курсах:
Несколько моментов:
- Курсор сразу в модальное окно не попадает;
- Нет кнопки закрытия - неудобно;
- Кнопки уроков не имеют названия. Раньше хотя бы следующий урок обозначался словом "Начать", но сейчас оно в alt ниже кнопки - это не очень удобно;
- Лучше не помещать список уроков курса в модальное окно, а выводить ниже кнопки "Начать", которая работала бы в виде спойлера. А то получается слишком много вложенных модалок.
После открытия списка уроков нажимаю по кнопке первого:
Появляется ещё одно модальное окно! Курсор в него попадает - это хорошо. Но вот кнопки закрытия нет (придётся использовать клавишу escape).
К тому же, я не знаю, зачем этот дополнительный клик нужен.
Лучше бы сразу после выбора урока в списке появлялись слайды. А то сейчас надо нажимать ещё раз "Начать":
С точки зрения доступности это ещё более неудобно, так как после клика курсор не попадает в нужное модальное окно: приходится нажимать tab.
Вот я пролистал некоторые слайды урока:
Делается это легко: кнопкой под изображением.
Вот только само изображение недоступно. У меня оно озвучивается как "графика info block 1008". А это непонятно.
По сути, функционал содержимого уроков недоступен сейчас незрячим.
Я просил добавить распознавание, но пока не дошли видимо до этого руки.
Квизы доступны. Прошёл к последнему слайду и нажал "Далее". Визуально появилась ещё одна модалка:
Вот только для того, чтоб её увидеть, надо нажать Таб. Просто так не поймёшь, что уже что-то появилось.
Помню в первый раз несколько раз нажимал "Далее", не понимая, что к чему: почему ничего не происходит.
Я не пойму, почему не сделать вместо очередного всплывающего окна просто замену слайда на текст с поздравлением и кнопкой возвращения к курсу.
Вторая проблема...
Вот список уроков:
Нажимаю по кнопке второго:
Опять же, как по мне ненужная модалка с "Начать".
Нажимаю по этой кнопке:
Курсор находится на ней: читается как "кнопка развёрнуто открывает диалог Начать".
Но в первый раз почему-то после нажатия клавиши Tab всё кроме списка уроков закрывалось...
Лишь со второго раза получилось зайти.
Хотя возможно это было по причине долгой подгрузки: на третьем уроке попробовал - сразу получилось. Да, действительно, если нажимаешь "Tab" сразу после клика по "Начать" всё закрывается вместо появления нужной модалки.
Радует, что хоть после возврата к курсу перестало появляться модальное окно с кнопкой "Начать", что переименовывалась в "Продолжить заново" или как-то так: тогда приходилось ещё раз нажимать Escape для возврата к списку уроков.
Понравилось, как реализован квест:
Как видите, здесь "Начать" не в отдельной модалке, а здесь же. Хотя и свой минус в этом тоже есть: приходится идти в конец окна, чтоб найти нужную кнопку.
В окне квеста с формой всё доступно, но нет кнопки "Закрыть":
Из-за этого я не могу закрыть модальное окно: Escape почему-то не срабатывает...
Профиль
Переходим на эту страницу:
Первая кнопка под логином открывает настройки. Лучше назвать aria-label="Настройки".
В модалке же кнопка закрытия тоже без названия.
Остальное вполне доступно.
Можно её также назвать, как сделано у "Задания".
Кстати, в модальном окне заданий не описана лишь кнопка закрытия.
Остальное отлично всё!
Разве что после клика по "Завершить" у запущенного задания курсор вышел из модалки: лучше оставлять его, как в слайдах уроков.
В модальном окне "Мой токен OA" не описана кнопка со справкой о том, что такое OA. Лучше добавить "?" или "Справка".
В реферальной программе:
После клика по "Все рефералы" открывается ещё одна модалка при наличии этой открытой. Возможно, стоит подумать над тем, чтоб реализовать страницу профиля с вкладками (не страницами, что внизу, а отдельными вкладками сверху).
И для удобства лучше добавить кнопку "Скопировать ссылку", а то не всегда хочется делиться в избранное или какой-то чат / канал.
По кнопке "Показать все" в инвентаре всё доступно кроме кнопки закрытия - она без названия. У конкретного элемента та же проблема (в остальном отлично).
В достижениях элементы списка обозначены как "кнопка свёрнуто открывает диалог графика achievement 3" - это непонятно. После открытия же описания есть. Лучше: вывести их и здесь, а технические обозначения типа "achievement 3" убрать.
Royale
Говорят, интересная игра, но у меня не загружается вообще:
Это в десктопном клиенте Unigram. К сожалению Telegram Desctop незрячим недоступен из-за использования QT.
Но в Telegram web работает:
Главная страница бота в принципе доступна.
Я даже смог запустить и пройти игру! Правда стремишься побыстрее ответить на вопрос, а идти к нему непросто: лучше сделать название раунда заголовком h2.
В разделе "Друзья" классно, если бы можно было добавлять не только по ID, но и по Telegram логину и нику. А то приходится узнавать его - неудобно...
Также кнопка "Поделиться" без имени. Лучше её назвать так.
Но ссылку получил:
Итог
Интересный продукт. Радует, что игра Academy Royale
доступна на 90%.
В основном боте стоит написать названия кнопок закрытия модалок, добавить распознавание текстов уроков и изменить систему модальных окон.
Благодарю за внимание и буду рад распространению этого обзора доступности для незрячих.
Если вы пришли к статье из другого источника, подписывайтесь на мой канал https://t.me/blind_dev - там новые обзоры доступности, анализ проектов по 4К+ (команда, концепт, коин, код + практика) и новости по моим разработкам.