Тестирование сайта screen-reader’ом: NVDA и VoiceOver на практике

`, отсутствующие подписи у форм и кнопки, которые на самом деле — ссылки.

02NVDA на Windows: установка и первый запуск

NVDA — бесплатный screen-reader от некоммерческой организации NV Access. Работает на любом Windows 10/11 и полностью на русском.

• Скачайте установщик с сайта nvaccess.org и установите как обычную программу.
• Запустите NVDA — он сразу начнёт читать всё, на чём стоит фокус.
• Откройте сайт в Chrome или Firefox (в этих браузерах NVDA работает наиболее предсказуемо).

Минимальный набор клавиш

• Insert + пробел — переключение «режима чтения» и «режима форм». В режиме чтения вы листаете страницу как документ, в режиме форм — печатаете в поля.
• H — следующий заголовок, 1–6 — заголовок нужного уровня. Это самый показательный тест: если по сайту нельзя «прыгать по H», структура сломана.
• K — следующая ссылка, B — следующая кнопка, F — следующее поле формы.
• Insert + F7 — список всех ссылок, заголовков и ориентиров (landmarks). Открывает структуру страницы как оглавление.

03VoiceOver на macOS и iOS

На технике Apple screen-reader встроен. Включается одной комбинацией и не требует установки.

macOS

Cmd + F5 — включение/выключение VoiceOver. Управляющая клавиша по умолчанию — Ctrl + Option (обозначается как VO). Полезные сочетания:

• VO + U — открывает Rotor: меню со списком заголовков, ссылок, ориентиров и форм страницы.
• VO + → / ← — переход к следующему/предыдущему элементу.
• VO + Space — «клик» по элементу под фокусом.

iOS / iPadOS

Настройки → Универсальный доступ → VoiceOver. Удобно повесить включение на тройное нажатие боковой кнопки. Управление жестами: один палец вправо — следующий элемент, двойной тап — клик, свайп двумя пальцами вверх — прочитать всю страницу. Мобильная проверка особенно важна: на смартфонах ошибок доступности обычно больше, чем на десктопе.

04Сценарий проверки за 20 минут

Не пытайтесь «прослушать весь сайт» — это бессмысленно. Пройдите сквозной сценарий, который проходит ваш клиент: попадание на главную → раздел услуг или каталог → отправка заявки. Эта последовательность покажет 80% реальных проблем.

• Главная страница. Нажмите Insert + F7 (NVDA) или VO + U (VoiceOver) — есть ли в списке заголовок H1? Логична ли иерархия H2/H3? Виден ли блок навигации как «main navigation»?
• Изображения. Послушайте, как читаются картинки. Если у логотипа alt «image123.png» — это ошибка. Если декоративные иконки названы «изображение», их нужно скрывать от screen-reader (alt=””). Подробнее об этом — в материале о SEO и доступности.
• Меню. Перейдите по нему только клавишей Tab. Видно ли, на каком пункте фокус? Раскрывается ли подменю с клавиатуры?
• Форма заявки. Понятно ли, какое поле сейчас читается? Озвучивается ли подпись («Имя», «Телефон»), а не просто «поле редактирования»? Что говорит screen-reader при ошибке валидации?
• Кнопка отправки. Это правда `<button>`, а не «дивная картинка», которую screen-reader называет «ссылка»?

05Типовые ошибки, которые слышно сразу

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

• «Ссылка, ссылка, ссылка» — у ссылок один и тот же текст «Подробнее» или «Читать», без контекста. В Rotor такой список превращается в бесполезный шум.
• «Изображение», «изображение», «изображение» — отсутствуют alt-атрибуты или они пустые там, где нужны.
• «Кнопка, без названия» — иконка-бургер или иконка корзины без aria-label.
• Фокус «прыгает» в неожиданное место при открытии модального окна. Часто открыли попап, а фокус остался внизу страницы.
• Ошибка формы видна, но не озвучивается. Красная рамка ничего не значит для незрячего пользователя — нужен текст и связь с полем.

Большая часть этих ошибок устраняется не «прикручиванием ARIA», а возвратом к нормальной семантике HTML. ARIA нужна только там, где нативного HTML-элемента нет.

06Когда нужен полный аудит, а не самопроверка

Самопроверка с NVDA или VoiceOver — это первый уровень. Он отлично закрывает явные проблемы и помогает понять масштаб. Но если ваш сайт работает в зоне, где доступность критична — госуслуги, медицина, банковский сектор, образование, — нужна полноценная проверка по чек-листу с фиксацией каждого найденного нарушения. Подробнее об этом — в нашем материале «Аудит доступности сайта: с чего начать».

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

Официальная документация по теме — Справка Яндекс.Вебмастера.