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