Что такое Предпросмотр текста для экранного диктора?

Предварительный просмотр текста для скринридера показывает, как вспомогательные технологии интерпретируют ваш HTML-контент. Он показывает доступное имя, роль и порядок чтения каждого элемента, чтобы вы поймали отсутствующие метки, сломанную структуру заголовков и проблемы с ARIA до того, как с ними столкнутся реальные пользователи.

Инструмент разбирает HTML так же, как скринридер собирает дерево доступности: отбрасывает визуальную раскладку, разворачивает aria-label и aria-labelledby, берёт alt у изображений и сводит результат в линейную последовательность чтения. Панель проблем подсвечивает ссылки без доступного имени, скачки уровней заголовков, изображения без alt и поля формы без меток.

Как использовать

1. Вставьте HTML-контент или введите URL для анализа.
2. Просмотрите линеаризованный порядок чтения и дерево доступности элементов.
3. Исправьте выявленные проблемы и повторно протестируйте, пока порядок чтения не станет логичным.

Когда использовать

• Перед публикацией лендинга, который должен пройти аудит WCAG AA.
• Если пользователь NVDA или VoiceOver сообщил, что навигационное меню звучит запутанно.
• При проверке HTML стороннего виджета после обновления, чтобы поймать регрессии по доступности.

Результат

Разработчик вставляет навигационное меню. Инструмент обнаруживает, что у 3 ссылок отсутствуют доступные имена, а иерархия заголовков перескакивает с h1 на h4, что вызывает путаницу у пользователей скринридеров.

Частые вопросы

Заменит ли этот просмотр тест на реальном скринридере?

Нет. У NVDA, JAWS и VoiceOver свои особенности в озвучке live-регионов, заголовков таблиц и динамического контента. Инструмент удобно использовать, чтобы выловить очевидные ошибки (нет меток, сломан порядок заголовков) до того, как тратить время в живом скринридере.

Почему декоративная иконка помечается как проблема?

Скринридеры по умолчанию озвучивают каждое img. Если иконка чисто декоративная, добавьте пустой alt и aria-hidden="true", и инструмент пропустит её в порядке чтения. Не используйте alt=иконка или alt=декор, это хуже, чем ничего.

Какой правильный порядок заголовков?

Ровно один h1 на странице, и нельзя пропускать уровни вниз (после h2 не должен идти h4). Возвращаться вверх можно. Пользователи скринридера навигируются прыжками между заголовками, и сломанная иерархия превращает страницу в лабиринт.

Нужен ли aria-label каждому интерактивному элементу?

Нет. У кнопки с видимым текстом aria-label не нужен, видимый текст автоматически становится доступным именем. Добавляйте aria-label только когда видимого текста нет (иконочные кнопки) или когда видимый текст не описателен (целый ряд Подробнее).

Можно вставить страницу целиком?

Да, вставьте полный HTML-исходник. Инструмент игнорирует script, style и meta и сосредоточен на body. Для очень больших страниц удобнее проверять секцию за секцией, чтобы список проблем оставался читаемым.

Похожие инструменты