Последовательное чтение урока со скринридером

До этого мы рассматривали разметку и поведение отдельных частей. Теперь соединим их в читательский маршрут. Скринридер позволяет изучать документ иначе, чем визуальный просмотр: переходить между областями и заголовками, читать строки и управлять элементами. Проверка должна показать, можно ли выполнить задачу, а не только присутствуют ли нужные атрибуты в исходнике.

Используем a11y-lab после урока 12. Это подготовка сценария для будущего наблюдения, а не отчёт уже выполненной проверки. В стенде имеются название документа, основная область, оглавление, код, таблица и учебная форма. Прототип не содержит полной библиотеки, поэтому переходы за его пределы нужно оценивать в подходящем окружении отдельно.

Задаём сочетание средств

Поведение зависит от браузера, операционной системы, скринридера и его настроек. Поэтому запись «проверено скринридером» слишком общая. Для повторяемого наблюдения укажите конкретные версии и выбранную раскладку управления. Если настройки произношения пунктуации изменены, это также влияет на чтение программного примера и должно быть известно при разборе результата.

На Windows можно выбрать NVDA, на macOS — VoiceOver. Их команды не являются взаимозаменяемыми. Вместо универсальной комбинации для каждого действия используйте действующее руководство NVDA или руководство VoiceOver. Здесь нас интересуют задачи навигации; точные команды следует брать для выбранной версии и режима.

Не отключайте все остальные способы восприятия ради искусственного усложнения первого знакомства. Сначала полезно понять, где находится фокус и как структура соотносится с исходником. Затем можно выполнять сценарий, ориентируясь на сообщение и клавиатурный маршрут. Проверка разработчика не заменяет опыт реальных пользователей, но помогает обнаружить воспроизводимые барьеры и подготовить более содержательное обсуждение.

Различайте чтение документа и взаимодействие с полем. В некоторых моделях команда буквенной навигации по заголовкам действует в одном режиме, а ввод этих же букв — в другом. Если поле получает символ вместо перехода, причина может заключаться в режиме, а не в отсутствии заголовка. Поэтому прежде чем изменять HTML, сопоставьте действие с руководством средства чтения.

От названия к объяснению

Первый шаг — открыть учебную страницу и понять её тему. Ожидаемая информация: «Запросы LINQ to XML — Профессор Веб». Не требуется буквальная одинаковая озвучка всей строки, но документ должен отличаться от других вкладок. Если вместо темы доступно только общее имя сайта, вернитесь к title и проверьте, откуда создаётся название.

Далее найдите основное содержимое через область страницы или специальную ссылку. Эти пути решают близкую задачу разными механизмами. При специальном переходе важно наблюдать, где продолжится управление. При выборе области — можно ли понять её назначение и добраться до статьи без повторного чтения всей навигации. Один успешный путь не отменяет необходимости оценить второй, если сайт его предлагает.

Получите карту заголовков. В ней должно быть понятно, что «Элементы-потомки» и «Условие отбора» относятся к одному уроку. Затем перейдите к нужному разделу и прочитайте объяснение. Если карта содержит десятки ненужных областей или каждая строка оформлена как заголовок, структура может присутствовать технически и мешать ориентированию практически.

Активируйте ссылку оглавления на #descendants. Сравните место чтения и визуальный фрагмент, если он используется при наблюдении. Не приписывайте отсутствие прокрутки ошибке скринридера без проверки цели, идентификатора и закреплённого хедера. Мы уже задали отдельную модель компенсации панели; теперь требуется проверить её результат в общем маршруте.

Код и данные читаются разными способами

Программный пример содержит знаки пунктуации. В зависимости от настройки они могут пропускаться или произноситься подробно. Поэтому способность узнать имя метода не доказывает возможность проверить точное выражение. Читателю, который изучает синтаксис, может понадобиться посимвольное или построчное чтение. Не нужно заменять реальный код скрытым пересказом, уничтожая возможность изучить исходные символы.

Схема XML имеет краткую альтернативу и текстовое описание. Оцените, доступны ли отношения между Employees, Employee и FirstName, а не только название изображения. Если всё существенное сохранено в подписи, форма линий может не требовать подробной озвучки. Если новый рисунок добавит другую ветвь, описание необходимо пересмотреть вместе с ним.

В таблице выберите ячейку результата метода Descendants. Задача — понять одновременно строку и столбец. Сравните чтение заголовков с тем, что задают th и scope. Возможности конкретного средства навигации могут различаться, поэтому фиксируйте фактический маршрут и доступную информацию. Не требуйте одного шаблона речи там, где смысл можно получить несколькими путями.

Проверьте также локальную прокрутку широкого фрагмента. Сосредоточение на чтении не отменяет управления самой областью. Если Tab создаёт лишние остановки в каждом коротком листинге, оцените необходимость tabindex в окончательной оболочке. Учебная версия демонстрирует вариант, но общая библиотека должна учитывать действительную длину и задачу фрагмента.

Форма и сообщение результата

Теперь перейдите к учебному полю. Не заполняя его, активируйте проверку. Ожидается перенос к полю и доступное объяснение отсутствующего значения. Затем введите неверный формат и повторите действие. Имя поля, подсказка и ошибка должны различаться по назначению, даже если средство представляет их одним связанным сообщением.

После reader@example.com успешный результат записывается в область состояния. Важно, что фокус не должен автоматически перемещаться на новый абзац. Запишите, был ли результат представлен и можно ли продолжить работу. Если сообщение задержано до окончания текущего чтения, это отличается от полного отсутствия сообщения; у наблюдения должна быть достаточная временная граница.

Повторите успешную проверку. Номер попытки меняется, поэтому область получает отличающийся текст. Если вы услышали результат дважды после одного действия, исследуйте дублирующиеся обработчики, лишнюю живую область или сочетание принудительного фокуса с объявлением. Сначала воспроизведите причину, а затем выбирайте изменение: уменьшение громкости не исправляет дублирование структуры.

Записываем наблюдение, а не впечатление

Для каждого шага укажите цель, действие, ожидаемую информацию и то, что фактически удалось получить. Если маршрут не выполнялся, оставьте состояние «не проверено». «Работает» без указания способа чтения и границы слишком легко превращается в утверждение обо всём сайте. Наш стенд является небольшой выборкой, а не всей библиотекой ProfessorWeb.

Особенно полезно отличать отсутствие информации от трудности её поиска. Если название результата существует, но находится после длинного неупорядоченного блока, исправление может касаться структуры, а не атрибута. Если ошибка понятна, но выбранное поле не связано с ней, нужен другой вид изменения. Читательский сценарий помогает определить, какое действие действительно нарушено.

Результат урока — подготовленный маршрут и форма записи наблюдений. После выполнения он станет основанием для конкретных исправлений и повторной оценки. Следующая глава соединит ручные сценарии с автоматическим анализом и объяснит, почему число найденных правил не равно доказательству доступности всей библиотеки.