Проверяйте доступность сайта на реальных страницах и ключевых пользовательских сценариях: измерьте контраст текста и элементов, увеличьте масштаб до 200%, затем пройдите интерфейс клавиатурой. Зафиксируйте, что именно мешает восприятию или управлению, исправьте дефекты и повторите тест. Такая ручная проверка помогает обнаружить заметные проблемы, но сама по себе не подтверждает полное соответствие WCAG.
Контрольный список проверки доступности перед публикацией
- Выберите важные страницы и сценарии: например, поиск, навигацию, заполнение формы и оформление заказа.
- Проверьте контраст обычного и крупного текста, границ элементов управления и состояний интерфейса.
- Увеличьте масштаб браузера до 200% и проверьте, что содержимое не обрезается и остаётся доступным.
- Пройдите основные сценарии клавишами Tab, Shift+Tab, Enter, пробелом и стрелками.
- Убедитесь, что фокус виден, движется в логичном порядке и не застревает.
- Запишите дефекты, повторите проверку после исправлений и сохраните результат.
Подготовьте страницы и сценарии для проверки
Ручной аудит доступности сайта подходит владельцам и редакторам сайтов, дизайнерам, разработчикам и тестировщикам, которым нужно проверить интерфейс перед публикацией или после изменений. Проверяйте не только главную страницу, но и типовые шаблоны, формы, меню и состояния с сообщениями об ошибках.
Не начинайте тест на рабочем сайте, если для проверки нужно отправлять реальные заказы, менять данные пользователей или выполнять другие необратимые действия. Используйте тестовую среду либо безопасные сценарии без реальных платежей и личных данных. Если интерфейс недоступен из-за сбоя, сначала устраните проблему со стабильностью: результаты проверки доступности будут ненадёжными.
Измерьте контраст текста, элементов и состояний
Подготовьте страницы в обычном состоянии и в состояниях наведения, фокуса, нажатия, ошибки и отключённого элемента. Для измерения понадобятся:
- браузер с инструментами разработчика или средством, позволяющим определить цвета переднего плана и фона;
- проверка контрастности сайта с калькулятором отношения контрастности;
- доступ к тестовой учётной записи, если часть интерфейса доступна только после входа;
- список состояний и элементов, которые нужно проверить: текст, ссылки, кнопки, поля и значимые графические элементы.
Для ориентира при проверке по WCAG: минимальное отношение контрастности обычного текста — 4,5:1, крупного текста — 3:1. Для визуальных признаков, необходимых для распознавания элементов управления и их состояний, обычно проверяют порог 3:1 относительно соседнего цвета. Эти измерения помогают оценить отдельные критерии, но не заменяют проверку сайта на соответствие WCAG в целом. Не оценивайте только цвет текста: важные границы и индикаторы состояния также могут быть недостаточно заметны.
Проверяйте фактические цвета в каждом состоянии. Если текст или значок меняет цвет при наведении, наведите указатель; для клавиатурного состояния отдельно проверьте фокус. Цвет не должен быть единственным способом сообщить об ошибке или выделить ссылку.
Проверьте интерфейс при увеличении масштаба до 200%
Перед тестированием масштаба выполните короткую подготовку:
- Откройте страницу в актуальном браузере и запишите исходный масштаб.
- Выберите один длинный или насыщенный элементами сценарий, например заполнение формы.
- Убедитесь, что в браузере нет расширений, которые меняют оформление страницы.
- Подготовьте заметки для фиксации обрезанного текста, перекрытий и недоступных элементов.
- Увеличьте масштаб браузера. Используйте настройки масштаба браузера, а не только увеличение шрифта в операционной системе. Установите 200% и проверьте, что изменение применилось ко всей странице.
- Пройдите выбранный сценарий. Откройте меню, перейдите по ссылкам и заполните поля, если они нужны для сценария. Сравните доступность элементов с исходным масштабом.
- Найдите признаки потери содержимого. Проверьте, не обрезаны ли заголовки, подписи и сообщения, не перекрывают ли друг друга элементы. Отметьте горизонтальную прокрутку, если она мешает читать текст или пользоваться элементами управления.
- Проверьте доступность основных действий. Убедитесь, что кнопки, ссылки и поля не уходят за пределы видимой области так, что до них нельзя добраться. Проверьте, что открытые меню и всплывающие блоки можно увидеть целиком и закрыть.
- Верните исходный масштаб и запишите результат. Зафиксируйте страницу, шаг сценария и конкретный дефект. Затем повторите тест после исправления.
При увеличении до 200% особенно внимательно проверяйте фиксированные панели, модальные окна, таблицы и формы с несколькими колонками. Само появление прокрутки не всегда означает дефект: важно, сохраняются ли содержание и управление без потери информации.
Пройдите основные сценарии только с клавиатуры
Проверка доступности сайта клавиатурой показывает, можно ли пользоваться интерфейсом без мыши. Начните с загрузки страницы и не используйте указатель до завершения сценария. Проверьте результат по списку:
- Клавиша Tab перемещает фокус по доступным элементам, а Shift+Tab — в обратном направлении.
- Фокус появляется на интерактивных элементах, а не перескакивает через важные действия.
- Enter активирует ссылки и подходящие элементы; пробел работает для кнопок и переключателей там, где это ожидаемо.
- Стрелки позволяют перемещаться внутри компонентов, для которых такой способ управления предусмотрен, например группы радиокнопок.
- Раскрытое меню можно открыть, пройти по его пунктам и закрыть без мыши.
- Поля формы доступны, а сообщения об ошибках можно найти и понять с клавиатуры.
- Диалоговое окно не позволяет фокусу незаметно перейти к содержимому позади него.
- После закрытия диалога фокус возвращается к элементу, который его открыл, либо к логичному месту рядом.
Оцените видимость фокуса и порядок переходов
Во время клавиатурного тестирования наблюдайте не только за тем, куда перемещается фокус, но и за тем, виден ли он. Типичные дефекты:
- Индикатор фокуса удалён стилями или почти не отличается от фона.
- Фокус есть, но его закрывает фиксированная шапка, баннер или открытая панель.
- Порядок переходов не соответствует расположению элементов и логике страницы.
- Tab попадает на декоративные или неактивные элементы, пропуская важные действия.
- Клавиатурный фокус застревает внутри меню или другого компонента без понятного выхода.
- После закрытия всплывающего окна фокус теряется или перемещается в начало страницы.
- При открытии меню или диалога экран не сообщает пользователю о смене контекста.
- Ссылки и кнопки выглядят одинаково, но ведут себя по-разному при нажатии клавиш.
Записывайте ожидаемый и фактический порядок переходов. Если элемент доступен только при наведении мышью или если индикатор фокуса виден лишь на части элементов, отметьте это как отдельный дефект.
Зафиксируйте дефекты и повторите проверку после исправлений
Для каждого замечания укажите адрес страницы, состояние интерфейса, последовательность действий, ожидаемый результат и фактическое поведение. Добавьте снимок экрана, если он помогает увидеть обрезание или слабый контраст; для клавиатурных проблем отдельно запишите клавиши и порядок переходов.
Выберите способ повторной проверки по задаче:
- Локальная проверка. Подходит для небольшого изменения цвета, отступа или стиля фокуса. Повторите именно тот сценарий, где возник дефект.
- Регрессионная проверка ключевых страниц. Используйте после изменений общих компонентов, меню, шапки или формы. Проверьте все страницы, где этот компонент встречается.
- Автоматизированный анализ в дополнение к ручному. Полезен для поиска части технических проблем, но не заменяет проверку контраста в реальных состояниях, порядка клавиатурной навигации и понятности интерфейса.
- Проверка специалистом или пользователями вспомогательных технологий. Уместна для сложных интерфейсов или перед значимым запуском, когда требуется более широкая оценка, чем обычное тестирование сайта на доступность.
После исправления повторите исходный тест и проверьте соседние состояния. Ручная проверка помогает выявлять препятствия, но для вывода о соответствии стандарту нужна оценка всех применимых критериев и релевантных страниц.
Разбор типичных затруднений при ручной проверке доступности
Достаточно ли проверить главную страницу?
Нет. Проверьте ключевые шаблоны и сценарии: внутреннюю страницу, форму, меню и другие важные для пользователей разделы. Повторно проверьте страницы, где используются изменённые общие компоненты.
Как понять, что контраст достаточный?
Определите фактические цвета текста и фона и рассчитайте отношение контрастности. Проверяйте каждый значимый цветовой вариант, включая состояния фокуса, наведения и ошибки.
Нужно ли увеличивать масштаб именно в браузере?
Для этой проверки да: так можно оценить изменение масштаба страницы в браузере. Увеличение системного шрифта проверяет другой параметр и не заменяет этот тест.
Что делать, если у сайта нет заметного фокуса?
Зафиксируйте элементы, на которых фокус не виден, и передайте замечание команде разработки. Не полагайтесь на визуальное положение курсора мыши: при клавиатурной навигации оно не показывает текущий фокус.
Можно ли считать проверку завершённой после автоматического сканирования?
Нет. Автоматический инструмент может выявить часть проблем, но проверку контраста в разных состояниях, масштабирования и реальной клавиатурной навигации нужно выполнять отдельно.
Что записать, если проблема возникает только в конкретном сценарии?
Укажите страницу, исходное состояние, последовательность действий, используемые клавиши и результат. Так дефект можно воспроизвести и проверить после исправления.