Доступность Web3-интерфейса при работе с кошельком
Оглавление курса «Web3-интерфейс: реестр в браузере» · Урок 28 из 30.
Операции кошелька состоят из нескольких ожиданий, а пользователь может работать с клавиатурой, экранным диктором или маленьким экраном. Доступность здесь определяется не только цветом кнопки. В этом уроке организуем фокус, понятные сообщения и последовательность подтверждения. Результат — маршрут публикации курса 17 остаётся понятным, когда всплывающее окно кошелька и страница работают независимо.
Предполагается уже подготовленный интерфейс чтения и записи. Новые сетевые методы не добавляем, доступность рассматриваем через состояния приложения. Ручной браузерный осмотр и программы в данной работе не выполнялись; ниже заданы критерии будущего осмотра и объяснена их связь с существующим маршрутом.
Название действия
Кнопка «Подключить кошелёк» не называется «Войти», если приложение ещё не создаёт серверную сессию. Кнопка «Подготовить публикацию» не называется «Опубликовать», если только запускает симуляцию. Финальная кнопка перед подписью объясняет, что потребуется подтверждение в кошельке. Такие названия уменьшают неопределённость для любого посетителя, особенно когда он слушает элементы последовательно.
Для деактивации показываем номер курса и текущий выпуск. Универсальная кнопка «Да» внутри длинного диалога хуже описывает действие, чем «Подтвердить деактивацию курса17». При этом технические длинные адреса не нужно включать целиком в каждое доступное имя: подробности расположены рядом и связаны с областью подтверждения.
Не следует использовать иконку без подписи как единственный вход в кошелёк. Внешний вид расширения может быть знаком одним людям и неизвестен другим. Текстовое название операции сообщает цель, а иконка остаётся дополнительным ориентиром. Такое же правило действует для обновления, копирования и раскрытия деталей транзакции.
Фокус при подготовке
Ошибку конкретного поля связываем с ним через aria-describedby. Если отпечаток неправильной длины, пользователь возвращается к полю отпечатка и читает объяснение. Сетевой отказ не является ошибкой ввода, поэтому фокус не прыгает туда. Область статуса сообщает, что подготовка не завершилась и можно повторить чтение.
После открытия экрана подтверждения фокус оказывается в его логическом начале. Пользователь может прочитать номер курса, действие, сеть и экземпляр до финальной кнопки. Если используется модальный диалог, его поведение должно соответствовать обычным требованиям клавиатурной навигации и возвращения фокуса после закрытия. Нельзя держать фокус в скрытой старой форме.
При открытии внешнего окна кошелька страница показывает короткое сообщение: «Подтвердите действие в выбранном кошельке». Она не может полностью управлять фокусом интерфейса расширения. После возвращения сообщается текущий этап: отказ, отправка или неизвестный результат. Сайт не объявляет автоматически успех только потому, что окно исчезло.
Сообщения о состоянии
Для обычных обновлений подходит область role="status" с вежливым объявлением. Она сообщает о завершении чтения или получении receipt, не перебивая каждую секунду. Критическая ошибка может требовать более заметного сообщения, но не каждое фоновое обновление становится тревогой. Слишком частые объявления делают интерфейс практически нечитаемым для экранного диктора.
Не обновляйте live region непрерывно обратным отсчётом тайм-аута. Важно сообщить начало ожидания, изменение существенного этапа и итог попытки. Число секунд можно показывать визуально отдельно, если оно помогает, но оно не должно звучать при каждом изменении. Тайм-аут также называется прекращением ожидания, а не окончательным отказом транзакции.
Одна строка «Готово» слишком неопределённа. Для чтения означает полученный снимок, для симуляции — подготовленный запрос, для отправки — полученный хеш, для receipt — включение и результат исполнения. У каждого этапа своё человеческое сообщение. Читатель должен понимать, какое действие уже произошло и что ещё ожидается.
Отключённые элементы
Кнопка может быть недоступна из-за отсутствия издательских прав, другой сети или активного запроса. Причина показывается текстом рядом. Сам факт disabled не объясняет её человеку, который не видит цвет или пытается пройти элементы клавиатурой. Для некоторых сценариев удобно оставить доступную область объяснения и отдельную кнопку исправления контекста.
Не нужно отключать весь экран во время ожидания receipt. Пользователь может читать курс, копировать хеш или смотреть историю. Ограничение относится к конкретному повторному действию, которое могло бы создать новую транзакцию. Публичное содержание и восстановление остаются доступны. Так ожидание сети не превращается в блокировку обычной работы.
Во время изменения аккаунта сохранённая форма остаётся черновиком. Сообщение объясняет, что подготовка сброшена и требуется новая проверка. Нельзя молча заменить отправителя и оставить финальную кнопку доступной под прежними параметрами. Доступность включает ясность причин изменений, а не только поддержку клавиши Tab.
Длинные значения
Отпечаток и адрес показываются полностью по запросу. Сокращённая строка удобна в карточке, но рядом есть возможность копирования точного значения. Кнопка сообщает, что именно будет скопировано: адрес реестра, адрес аккаунта или хеш транзакции. Слово «скопировать» без объекта в списке нескольких значений создаёт неопределённость.
После копирования появляется короткое подтверждение, а фокус остаётся на кнопке. Если clipboard недоступен, пользователь может выделить текст вручную. Не следует скрывать полное значение в недоступной подсказке. При узком экране строка переносится или располагается в ограниченной прокручиваемой области, не расширяя всю страницу.
Сеть выражена названием и числовым идентификатором в деталях. Цветной значок не становится единственным отличием local и внешнего окружения. Перед подписью эти сведения особенно важны, потому что ошибка сети имеет реальные последствия исполнения, даже когда интерфейс выглядит одинаково.
Сохранённая история и понятный порядок
После перезагрузки страница может обнаружить незавершённую операцию. Она не должна сразу открыть кошелёк. Вместо этого показывает сообщение о сохранённом наблюдении и кнопку продолжить чтение результата. Человек сам выбирает маршрут. Если найдено несколько операций, список содержит даты, действия и статусы с понятными названиями.
История по умолчанию может показывать последние действия, но новые строки не должны внезапно перемещать фокус. Лучше сообщить о новых событиях и позволить обновить список. При пагинации сохраняется логическая связь заголовка, списка и навигационных кнопок. Номер страницы описывает конкретный снимок истории.
Для будущего ручного осмотра пройдите весь маршрут только клавиатурой, затем прочитайте его линейно как последовательность названий и сообщений. Отдельно рассмотрите отказ кошелька и тайм-аут после хеша. Ожидается, что в обоих случаях сохраняется понятное действие для продолжения. Эти критерии не являются отчётом о проведённой проверке. Практические шаблоны доступны в WAI-ARIA Authoring Practices, а область статуса — в WAI-ARIA.