Насколько доступен для незрячих интерфейс сайтов сервисов 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%". Лучше бы разделять пробелами. А ещё круче, если создадите стандартную таблицу.

Итог

Некоторые элементы доступны, но где-то около 40%-60% интерфейса стоит сделать доступнее. Буду рад этому. Благодарю.

А если вы перешли к статье из канала или блога, благодарю вас за прочтение и распространение.

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

Оглавление