Проверка структуры страницы на слух

Аудит структуры означает проверку заголовков так, как их представляет программа чтения с экрана, без учёта визуального оформления. 👂

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

Выпишите только свои заголовки по порядку. Если один этот список кратко описывает страницу, структура выполняет свою задачу.

Сначала убедитесь, что есть ровно один h1, называющий страницу. Отсутствующий или дублирующийся h1 — самый распространённый недостаток структуры.

Проверьте уровни и найдите пропуск, например переход с h2 на h4. Каждый переход вниз должен быть ровно на один уровень.

Ищите жирный текст, который должен быть заголовком, но оформлен как стилизованный div. Эти скрытые пробелы оставляют пользователей программ чтения с экрана без указателя.

Инструменты разработчика и расширения браузера могут показать представление структуры. Они перечисляют настоящие заголовки и отмечают пропущенные или отсутствующие уровни.

Откройте список заголовков в NVDA или VoiceOver. Прослушивание собственной страницы выявляет непонятные места, которые не покажет ни одна схема. 🔊

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

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

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

Вы научились проверять структуру на слух: подтверждать наличие одного h1, находить пропущенные уровни, выявлять поддельные заголовки и проверять формулировки с помощью настоящей программы чтения с экрана. ✅