Elysia Tools
Навигация
Workflow Playbook
Проверьте структуру страницы или UI-компонента, порядок чтения, контраст на скриншотах и риски для цветового зрения, а затем оформите автоматические находки в запись с ручной проверкой.
Темы
Аудит перед публикацией начинается с воспроизводимого состояния, а не со случайного посещения страницы. Запишите URL или fixture, идентификатор сборки, viewport, авторизацию и состояния вроде меню, диалогов, ошибок валидации и пустых результатов. Скриншоты позволяют сопоставлять визуальные находки, но не заменяют HTML и поведение, которое их создает.
Сначала выполните структурную проверку, чтобы собрать проблемы подписей, альтернативного текста, заголовков и областей. Затем изучите смоделированную последовательность и сопоставьте ее с задачей человека. Инструмент может указать на подозрительный порядок, но его понятность оценивает человек; он же должен протестировать клавиатуру и подходящую вспомогательную технологию.
Используйте проверку пар для известных цветов, проверку палитры для повторно используемых токенов и heatmap для областей, которые сложно перечислить. Симуляция цветового зрения помогает обнаружить состояния, передаваемые только оттенком. Сохраните реальные значения и скриншоты, а при необходимости добавьте текст, значки, узоры или подписи, не зависящие от цвета.
Отчет должен связывать каждое автоматическое наблюдение с местом на странице и хранить результат повторной проверки. Ручная проверка дополнительно охватывает клавиатуру, видимый фокус, масштаб, перестройку, смысл контента и исключения. Завершите решением исправить, перепроверить, отложить или заблокировать. Процесс упорядочивает доказательства, но не сертифицирует юридическое соответствие и не гарантирует отсутствие проблем для каждого человека.
Руководство по рабочему процессу
Отрендерите страницу в согласованных viewport и состояниях и сохраните скриншоты с идентификатором сборки. Включите меню, диалоги, ошибки и другие состояния, способные изменить фокус, текст или контраст, а не только начальный экран.
Передайте показательный URL, HTML или изображение макета в проверку доступности. Разберите проблемы подписей, альтернативного текста, заголовков и областей, сохраните исходные данные и точное место каждой находки для последующего сравнения.
Пропустите ту же страницу или разметку через симулятор скринридера и изучите последовательность заголовков, областей, элементов управления, подписей и сообщений состояния. Сопоставьте ее с намеченной задачей и отметьте, что требует настоящего скринридера или клавиатурного теста.
С помощью heatmap на скриншоте найдите слабые области, проверьте важные пары или токены инструментами контраста и запустите симуляции цветового зрения, чтобы обнаружить неразличимые состояния или элементы. Симуляция показывает риск, а не выносит окончательный вердикт.
Проверяйте URL или разметку через проверку доступности, используйте Website Screenshot для сопоставимых макетов на разных viewport, а при изменении интерфейса клиентским рендерингом сохраняйте оба вида свидетельств.
Считайте результат проверяющего автоматическим списком сигналов, а через симулятор скринридера изучите заголовки, области, имена и сообщения состояния. Человек должен подтвердить, что порядок подходит реальной задаче.
Для известной пары выбирайте проверку контраста, для токенов дизайн-системы — проверку палитры, а для зон скриншота и риска цветовой путаницы — heatmap и инструменты цветового зрения. Ни один такой результат сам по себе не доказывает доступность всего интерфейса.
Проверьте палитру и цветовые токены, если страницу задает дизайн-система, при необходимости извлеките цвета из важных изображений и создайте отчет с группировкой по серьезности. Ответственный проверяет работу с клавиатурой, видимость фокуса, масштабирование и перестройку, смысл контента и исключения перед решением исправить, перепроверить, отложить или заблокировать.