♿ 40-60% интерфейса Moni требует доработки для незрячих пользователей, но большинство проблем не сложные
Незрячий разработчик разобрал доступность web3-проекта Moni. Доступность в финтех и web3 редко рассматривается как обязательная часть архитектуры. Внимание уделяется визуальной составляющей, а сценарии использования без мыши или без экрана остаются вне фокуса.
Выяснил: примерно 40-60% интерфейса требует доработки с точки зрения accessibility. Большинство проблем не архитектурно сложные, это вопросы корректного использования aria-атрибутов, логичной структуры заголовков и поддержки клавиатурной навигации.
Внутри:
– Кнопки без описания: под полем «Check account» должна быть кнопка поиска, но есть элемент "По щелчку" без описания;
– Заголовки на каждой строке: неудобно слушать текст, когда каждая строка это заголовок уровня 1 или 2;
– Таблицы представлены кнопками: столбцы это кнопки, нет нормальной HTML-таблицы с table, tr, th, td;
– Слияние строк без пробелов: «Ethereum$395.790.1 ETH100%+0%», «L117.62%-1.93%», «Smarts244+1»;
– Курсор не попадает в модальные окна: после клика по «Manage filters» курсор не переходит к настройкам;
– Поиск недоступен с клавиатуры: ввел HYPE, что-то появилось на экране, но с клавиатуры не смог поймать и перейти;
– Кнопки навигации без названий: первая и последняя в постраничной навигации неподписанные, лучше «First» и «Last»;
– Решения простые: использовать aria-label=«Name» у элементов, tabindex=-1 и .focus в JS для фиксации курсора, разделять блоки h2 и h3 заголовками.
➡️ Читать статью
———
💻 Курс по поиску работы 😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
