Просмотр глазами экранного диктора

Из двух измерений в одно

Глазами вы охватываете страницу целиком: логотип слева вверху, меню поперёк, статья посередине, боковая колонка справа. Речь так не умеет. Экранный диктор, например NVDA, JAWS, VoiceOver или TalkBack, проходит HTML в порядке исходного кода и произносит по одному элементу, ставя роль элемента перед его текстом: «заголовок уровень 2, Цены», «ссылка, Связаться с нами», «поле ввода, Email, обязательное».

Никто не слушает всё это от начала до конца. Опытные пользователи перемещаются по типам. Одна клавиша переходит к следующему заголовку, другая выводит список всех ссылок на странице, третья ведёт прямо к основному ориентиру. Поэтому для них роль и имя каждого элемента и есть весь интерфейс. Кнопка, которая на экране выглядит очевидной, но не имеет текста, объявляется как «кнопка», и больше они ничего не слышат.

Как строится расшифровка

Наш сервер один раз загружает страницу и проходит <body> так же, как это делают вспомогательные программы. Первым идёт <title> страницы, потому что его произносят первым при открытии. После этого каждый элемент становится строкой:

• Ориентиры: баннер, навигация, основное содержимое, дополнительное, сведения о содержимом, поиск, а также именованные области и формы.
• Заголовки с их уровнем, ссылки с адресом назначения, кнопки с их состоянием (развёрнуто, свёрнуто, нажато).
• Поля форм с их типом и состоянием: «флажок, не отмечен», «комбинированный список», «поле ввода, email, обязательное».
• Изображения, фреймы, списки с числом пунктов и таблицы с числом строк и столбцов.

Имя каждого элемента мы вычисляем в том же порядке, что и браузеры: aria-labelledby, затем aria-label, затем собственный источник (alt, <label>, текстовое содержимое), затем title. Всё, что несёт hidden, aria-hidden="true" или встроенный display:none, пропускается, как и содержимое закрытого <details>. Изображения с alt="" пропускаются и считаются декоративными.

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

Что означают пометки

Красная пометка значит, что у элемента вообще нет имени. Жёлтая значит, что имя есть, но оно не помогает. Сводка также сообщает об отсутствии языка страницы, <h1> и основного ориентира и показывает, сколько элементов стоит перед основным содержимым. Если это число велико, каждое посещение каждой страницы начинается с одного и того же долгого перечисления вашего меню.

Три способа пользоваться фильтрами

1. Выберите Заголовки и прочитайте только этот список. Он должен работать как оглавление страницы.
2. Выберите Ссылки. Каждая строка должна быть понятна без окружающего предложения.
3. Выберите Поля и кнопки, закройте глаза и нажмите «Слушать». Вы должны понять, чего от вас хочет каждый элемент управления.

Выберите любую строку, чтобы начать чтение с неё. Ползунок скорости даёт почувствовать темп, который выбирают постоянные пользователи, а он часто намного выше обычной речи.

Приближение с известными пробелами

Расшифровка строится по HTML в том виде, в каком его отправил сервер. Мы не выполняем JavaScript и не применяем таблицы стилей, поэтому содержимое, добавленное скриптом, отсутствует, а содержимое, скрытое CSS-классом, всё равно читается. Время прослушивания оценивается примерно из 170 слов в минуту. Очень длинные страницы обрываются на 1200 элементах. У каждого настоящего экранного диктора к тому же свой словарь и свои сочетания клавиш, поэтому перед выпуском проверьте хотя бы с одним из них. NVDA бесплатен для Windows, а VoiceOver входит в macOS и iOS.