Как экранные читатели «видят» ваш сайт

Когда мы смотрим сайт глазами — всё ясно: цвета, блоки, кнопки. Но часть людей слушает сайт: их помощь — экранные читатели (screen readers). Они озвучивают то, что видят в коде: заголовки, абзацы, кнопки, ссылки, роли секций.

Почему это важно

Без правильной разметки пользователь слышит:
«кнопка… кнопка… ссылка без названия…» — и теряется.
Правильная семантика даёт ясный маршрут: «Заголовок уровня 1: О нас → Навигация → Основной контент…»

Как сайт выглядит «для ушей»

Экранный читатель идёт по структуре, а не по визуальному виду:

• Заголовок H1: «О нас»
• Абзац: «Мы делаем сайты без боли»
• Ссылка: «Связаться»
• Кнопка: «Отправить заявку»

Поэтому визуально очевидное нужно явно указать в HTML.

Мини-гайд по разметке

1) Заголовки по порядку

• Один H1 на странице. Далее H2, при необходимости H3.
• Не используйте размер шрифта для иерархии — используйте теги.

<main>
  <h1>О нас</h1>
  <h2>Команда</h2>
  <h3>Дизайн</h3>
</main>
2) Landmarks (ориентиры)
Используйте стандартные области — они появляются в «быстрой навигации» читателя:

html
Copy code
<header>…</header>
<nav aria-label="Основная навигация">…</nav>
<main id="content">…</main>
<aside aria-label="Боковая панель">…</aside>
<footer>…</footer>
3) Alt у изображений
Смысловая картинка — краткий alt: что это и зачем.

Декор — пустой alt alt="" (так читатель пропустит картинку).

html
Copy code
<img src="/images/flow.png" alt="Схема этапов: заявка → подтверждение → оплата">
<img src="/images/ornament.svg" alt="">
4) Названия для ссылок и кнопок
Текст должен описывать действие/цель:

html
Copy code
<a href="/contact">Связаться</a>
<button type="submit">Отправить заявку</button>
Как быстро проверить
🧩 Заголовки: один H1; далее H2/H3 без «прыжков».

📦 Landmarks: есть <main>, <nav>, <header>, <footer>.

🖼️ Alt-тексты: у важных картинок alt есть; декор — alt="".

⌨️ Клавиатура: Tab идёт по логике, фокус виден.

🗣️ Экранный читатель:

Windows — NVDA,

macOS/iPhone — VoiceOver.
Пройдитесь стрелками/Tab — понятно ли «на слух»?

👓 Accessibility Tree: Chrome DevTools → вкладка Accessibility.

Быстрый чеклист
 Один H1 на страницу

 Заголовки по смыслу, не по размеру шрифта

 Навигация в <nav>, контент в <main>

 У всех важных изображений есть alt

 Tab-навигатор идёт последовательно, фокус виден

 Проверено NVDA или VoiceOver

Главное
Доступность — не «доп. функция», а обычная забота. Сайт, который можно читать ушами, понятен людям, дружелюбен к поисковикам и будущим вам. 💙