Статья Blind Dev

Moni sites: что ломается для screen reader и как это исправить

Практический accessibility-разбор интерфейса: навигация, формы, смысловая структура и фокус.

Материал основан на личном опыте и исходных публикациях Blind Dev; перед применением проверьте актуальность деталей.

Полный текст статьи Teletype от 2025-10-24. Наблюдения, оценки и технические утверждения относятся к интерфейсам на дату публикации; это не повторная проверка их текущего состояния.

Доступность интерфейсов в web3 и финтех-проектах по-прежнему редко рассматривается как обязательная часть архитектуры. Чаще всего внимание уделяется визуальной составляющей и функциональности, тогда как сценарии использования без мыши или без экрана остаются вне фокуса. В этом разборе я анализирую доступность Moni с точки зрения незрячего пользователя (сам являюсь им) и параллельно даю конкретные технические рекомендации, которые могут улучшить удобство использования интерфейса в целом.

Введение: как улучшать доступность

• Используйте aria-label=“Name” у тех элементов, которым текст невозможно добавить в связи с дизайном.

• Для фиксации курсора - используйте tabindex=-1 и .focus в JS

• Лучше разделять блоки на странице h2 и h3 заголовками. Так удобнее по ним перемещаться.

Основной сайт

На главной странице getmoni.io некоторые кнопки тоже не подписаны (видимо лишь в виде иконок), но это не критично:

• По клику ничего не происходит

• Это инфо ресурс.

Пример: кнопки под “Alpha Reports” и ссылкой “Learn More” (я про положение в html коде, а не визуально). Они также над заголовком “MONI API”. Подобные есть под заголовком “LOVE IS MONI”.

На странице про Noti bot есть информация в заголовке, начиная от “Why choose Noti Bot?” и до ссылки “Add Noti to your group”. От ”➕” и до кнопки “Play”. От заголовка “Step 1” до заголовка “FAQ”.

Очень неудобно слушать текст, когда на каждой строке заголовок.

Получается что-то типа этого:

“заголовок  уровень 1 Why choose Noti Bot? заголовок  уровень 1 We get it—building a community before launch is tough. Noti Bot helps you boost virality,  заголовок  уровень 1 engagement, and hype. заголовок  уровень 1 Alert received –> FOMO kicks in –> Community hype ignites заголовок  уровень 2 Your community won’t miss a post from your Twitter account, increasing engagement for all  заголовок  уровень 2 participants”.

Подобное также есть на странице Moni extension.

Расширение

• Под кнопкой “Dark Theme” есть ещё одна без названия. Зачем она нужна непонятно - лишний элемент, который выполняет то же действие. То же самое и под “Sidepanel”.

• Под полем “Check account” должна быть кнопка поиска, но этого нет. Есть элемент “По щелчку”, но он без описания = усложняет понимание (не всегда “По щелчку” выполняют какие-то действия).

• Далее идёт ссылка с кнопкой и графикой, а затем - список из пяти кнопок без описания. Что они делают непонятно.

• “Clear” у истории поиска доступна - хорошо.

• На странице аккаунта в расширении под логином в X есть кнопка без описания, после клика по которой открывается выбор: trusted account и scam account. Лучше назвать её “rate” или как-то так. Под списком будет скриншот - надеюсь, будет понятно, про что я.

Ещё по данным проекта:

Есть подобное этому: “Smarts244+1”. Прошу разделять всегда слова пробелами. Здесь, конечно, всё нормально, но бывает из-за этого баг. Например, в Debank неудобно слушать проценты, так как их числа сливаются с числами балансов…

В остальном здесь всё хорошо.

Единственное: хотелось бы видеть данные по Moni score при заходе на сайт проекта при его наличии в Moni.

Например, зашёл я на coredao.org - при открытии расширения сразу же видна информация по Moni score их X.

Подобное можно было бы сделать и при заходе на страницы X профилей.

Данные расширения на странице Твиттера

• Moni Score стоит писать в кнопке “Discover” или рядом с ней, а не под именем и кнопкой “Provides details about verified accounts.”. И также опишите кнопку оценки аккаунта (где информация о рейтинге и кнопки “Trusted account” / “Scam account”), а то сейчас приходится узнавать её назначение методом тыка.

• В строке с количеством смартов и упоминаний смартами стоит разделить число и слово Smart

• В списке твитов над логином есть кнопка. Она тоже не подписанная, и открывает расширение. Совет: назовите “Moni aX ccount data” или как-то так. А над кнопкой “More” оценка. Опять же, стоит и её описать.

Скриншот:

По расширению всё.

Сайт discover.getmoni.io

Сразу под названием и, как понимаю, логотипом есть кнопка без описания. Код:

<button type="button" class="baseButton_container__Le7T_ sideNavigation_collapseBtn__WKZuf sideNavigation_collapseBtnCentered__7vZJX"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="currentColor" width="18"><path d="M14.89 13.656H5.75V12.25h9.14v1.406Zm0-3.515H7.86V8.734h7.03v1.407Zm0-4.922v1.406H5.75V5.219h9.14ZM2.235 11.962l2.518-2.524-2.518-2.525.992-.991L6.74 9.438l-3.515 3.515-.992-.991Z"></path></svg></button>

Я так и не понял её назначение. Но хотелось, чтоб она была описана.

К другим элементам:

• Под кнопкой с адресом кошелька есть опять неподписанная кнопка и список из пяти кнопок в ссылке.

• В “Trending” под изображением с alt “fire” две кнопки. Возможно стоит их наименовать “Prev” & “Next”, хотя я не заметил различия после их нажатия: возможно стоит убрать их, сделав полностью визуальными.

• В проектах (касается и Curated, и Raw) после клика по “Manage filters” курсор не попадает на настройки, что неудобно. Возможно стоит сделать модальное окно (role=“dialog” и другие методы выделения html блока)

• В списке проектов есть столбцы. Но они представлены кнопками. Будет здорово, если сделаете нормальную html таблицу с тегами table, tr, th, td и т. п. Кнопки можно оставить для сортировки, но столбцы должны быть именованы, чтоб понимать, какие данные к чему относятся. А то сейчас смотришь список: если не сохранять названия, получается непонятная смесь. Пример одной строкой: 2D552 +573 53 +52 20 +20 4.24K +4 095 Как понимаете, сложно для восприятия.

Про Watchlist

В “New list”:

Над полем “List name” кнопка выбора символа (лучше назвать “Select symbol”. А над ней - закрытия. Её лучше назвать “Close”. Кстати, также стоит и в настройках фильтров сделать.

В списке листов:

• Кнопка удаления листа не описана. Напишите “Delete”, как у “Edit”.

• “Edit” стоит переименовать в “Edit name”.

На странице листа:

• Под периодами изменений есть кнопка “Feed”. Что делает непонятно: изменений не заметил. Оказалось, что это лента в модальном окне, но курсор в него не попадает сразу - неудобно.

• Также лучше таблицу сделать.

• Под Последним элементом является неподписанная кнопка. После клика открывается управление листами. Лучше назвать “Manage”. Также неудобно, что повторный клик не скрывает управление - это не очень удобно, так как приходится нажимать клавишу стрелки вниз для перехода к следующему элементу в списке.

• Больше к уровню удобства, но было бы здорово видеть массовый выбор с input type=“checkbox” у каждого элемента списка. Нажатие по кнопке “Manage” под списком открывало бы возможность удаления или добавление нескольких аккаунтов.

О Mentions Feed

Также есть неподписанные кнопки в Trending.

Возле поиска профилей есть тоже кнопка, которая не подписана. Лучше назвать её “Search”, если она действительно запускает поиск.

В управлении фильтрами также нужно сделать модалку или переход курсора к месту открытия, изменить таблицу в списке добавить подпись к кнопке “Manage” в списке для управления в списках.

Smart Tracker

Дополнение: лучше в начале написать, чем отличается ватчлист от “Smart Tracker”. В начале я не понимал. Например, что ватчлист позволяет получать ленту новых постов и некоторое другое, а здесь - мониторить смартов и их действия.

Также стоит переименовать “Edit” в “Edit name”, добавить названия кнопкам закрытия и выбора символа.

Категории - отлично! Но хотелось бы возможности выбора нескольких из них, а не выбирать отдельно. Думал, что смогу сразу увидеть акки по Researchers, Hyperliquid Degens и AI Agents Degens - не получилось…

Кроме того стоит назвать в списке кнопку “Manage”.

Отчёты, Mindshare и чекер

Страница Reports

Тут всё норм. Единственное - возможно стоит сделать их на своём ресурсе, чтоб не зависеть от Notion. К тому же, он не очень хорошо доступен. В частности, не поддерживается автоматический перевод всего текста и есть некоторые другие недостатки.

mindshare

Здесь на удивление всё хорошо!

Единственное, на вкладке Categories сливаются данные: L117.62%-1.93% Прошу разделять пробелами. Также непонятно, что за проценты. Возможно опять же лучше сделать таблицу.

В “Projects” отлично всё, как и в Chains.

Единственное, в Chains тоже лучше сделать таблицу.

И возможно стоит указать, что это за настройки перед списком, и как с ними работать. А то непонятно: то ли это фильтры, то ли что… И почему отображается, например, небольшой список блокчейнов у проектов. Как на главной реализован фильтр как-то больше нравится…

Страница Checker

В “Top Queries” две неописанные кнопки листания, которые не влияют ни на что при нажатии с клавиатуры.

В остальном всё хорошо.

Referrals

На странице реферальной программы всё доступно.

По крайней мере на данном этапе (пока функционал работы с балансом недоступен, так как 0 приглашённых и 0 $).

Буду рад использованию по моей рефке, если вы - читатель моего канала и зашли в статью: https://discover.getmoni.io/?ref=ORKFDD

Premium

Здесь под “Pay with referal bonuses” есть кнопка без названия. Назначение неизвестно.

В остальном здесь всё нормально.

Про страницу Alerts

В списке над названием и прочими данными есть неподписанная кнопка. Назначение так и не понял, так как изменений не обнаружил.

Также возле “Edit” насколько понимаю кнопка удаления: лучше написать название “Delete”.

Редактирование по “Edit” или создание по “New Alert”:

• Сделайте кнопку закрытия с названием

• Здорово, если будет возможность превратить выделение списков в input type=“checkbox”. Можно, конечно, нажимать и смотреть сверху на количество, но это не очень удобно. Да и не все поймут, что так надо делать.

• В “Alert Types” тоже список с текстом. Я давно настраивал: уже даже сам не помню, но вроде как была проблема с настройкой (пришлось просить помощи зрячих, чтоб понять суть). Лучше сделать, опять же, подобие управления фильтром на главной. Хотя я тут припоминаю, что в итоге не трогал этот список вроде бы…

• Возле ID есть неподписанная кнопка. Лучше указать, что это выбор ID из списка.

• При создании алерта на вкладке “Smart Tracker” есть “Alert Types”. Опять же, непонятно, происходит ли выбор после нажатия Enter. Лучше реализовать чекбоксы или input type=“radio”.

Портфолио трекер

Посмотрим, что с доступностью https://app.getmoni.io

Что стоит изменить:

• Добавить таблицу для большего удобства определения столбцов

• Последний элемент в списке - неподписанная кнопка. Лучше назвать “Actions”.

• В создании тоже стоит назвать кнопку закрытия и кнопку выбора символа.

• Неудобно, что после создания ватчлиста переходит на его страницу. Приходится выбирать вручную Global для выбора других активов. Поиск абсолютно недоступен: ввёл HYPE. Вроде что-то на экране появилось, но с клавиатуры не смог поймать и перейти. Это очень плохо! Скриншот ниже

Ещё:

• Первая кнопка и последняя в постраничной навигации неподписанные. Лучше написать “First”, “Last”.

• В самом низу тоже неподписанная кнопка. Назначение не понял.

• При создании портфолио также добавьте название к кнопке закрытия и выбора символа.

• Рядом с “Share Portfolio” есть неподписанная кнопка (в html коде до неё). Открывает выбор редактирование, исключение из общего числа и удаление. Лучше назвать “Actions”.

• Ниже строки ““Portfolio created. Add balance to get started.”” есть неподписанная кнопка. Лучше назвать “Add transaction”.

• В списке токенов по “Select token”.

• При поиске токена, если вводишь тикер, почему-то они не сортируются по капитализации. Так, например, когда ввёл ETH, первым был ETH+ - неудобно. Также хотелось бы устанавливать цену по рынку через клик по соответствующей кнопке возле поля цены.

• В списке транзакций последний элемент - кнопка без названия. Лучше назвать “Actions”.

• В “Sorter” на вкладке Coins у каждого варианта есть две кнопки. Лучше назвать их соответственно “Desc” и “Asc”.

• Идёт слияние строк: “Ethereum$395.790.1 ETH100%+0%”. Лучше бы разделять пробелами. А ещё круче, если создадите стандартную таблицу.

Итог

Часть элементов интерфейса Moni реализована корректно, однако значительная доля функциональности остаётся затруднительной для использования незрячими пользователями. По моим наблюдениям, примерно 40–60% интерфейса требует доработки с точки зрения accessibility. Большинство описанных проблем не являются архитектурно сложными. В основном это вопросы корректного использования aria-атрибутов, логичной структуры заголовков и поддержки клавиатурной навигации. Их исправление не требует полной переработки продукта, но существенно влияет на возможность полноценного взаимодействия. Если продукт ориентирован на широкую аудиторию, доступность должна рассматриваться как часть инженерной задачи, а не как дополнительная опция.

Если вам интересны практические разборы доступности и подробная аналитика web3-проектов по методике 4К+ (команда, концепт, коин, код + практика), подписывайтесь на канал: https://t.me/blind_dev

Источник

Оригинальная статья на Teletype.