Семантика и доступность
Скринридер читает страницу слепому пользователю. Поисковик индексирует страницу в Google. Бот сохраняет в архив. Все они НЕ ВИДЯТ дизайн — только структуру тегов. Если у вас всё через `<div>` — для них это просто «коробки». Семантика — это уважение к этим читателям.
Главные семантические теги
<header> — шапка сайта или секции. <nav> — навигация. <main> — основной контент (один на страницу). <article> — самостоятельная единица контента (статья, пост). <section> — логический раздел внутри. <aside> — боковая колонка / связанный контент. <footer> — подвал сайта или секции. Скринридер позволяет «прыгать» по этим landmark-ам — для слепого пользователя это как нам клавиша Tab.
Заголовки — это карта
Иерархия h1→h2→h3→... — это оглавление страницы. Слепой пользователь может вызвать список заголовков и сразу прыгнуть к нужному разделу. Правила: один h1, не пропускать уровни (h1→h3 без h2 — плохо), оформлять заголовки СТРУКТУРНО, не визуально (хочешь маленький текст — стиль, а не h6).
aria-атрибуты — когда HTML не хватает
Когда обычных тегов мало — кастомные UI-элементы (выпадающие меню, табы) — добавляешь aria-атрибуты. Самые частые: aria-label="кнопка закрыть" (для иконочной кнопки без текста), aria-expanded="true/false" (раскрыто ли меню), aria-hidden="true" (скрыть от скринридера декоративный элемент). Простое правило: если используешь <div> или <button> которые делают что-то нестандартное — нужен aria.
Кнопка vs ссылка — частая ошибка ИИ
Ссылка <a href> — переход куда-то. Кнопка <button> — действие на текущей странице. ИИ часто кладёт onclick на <a href="#"> — это плохо: скринридер скажет «ссылка», но никуда не ведёт. Правильно: <a> — для навигации (есть href), <button> — для действий. Стилизовать кнопку как ссылку и наоборот — допустимо, но ТЕГ должен соответствовать смыслу.
<!-- ❌ ПЛОХО — всё через div, скринридер ничего не понимает -->
<div class="header">
<div class="logo">Сайт</div>
<div class="menu">
<div class="menu-item" onclick="goTo('/about')">О нас</div>
<div class="menu-item" onclick="goTo('/contact')">Контакты</div>
</div>
</div>
<div class="content">
<div class="big-text">Главный заголовок</div>
<div class="text">Текст статьи...</div>
</div>
<!-- ✅ ХОРОШО — семантика читается всеми -->
<header>
<a href="/" class="logo">Сайт</a>
<nav aria-label="Основное меню">
<a href="/about">О нас</a>
<a href="/contact">Контакты</a>
</nav>
</header>
<main>
<article>
<h1>Главный заголовок</h1>
<p>Текст статьи...</p>
</article>
</main>
<!-- Иконочная кнопка — обязательно aria-label -->
<button aria-label="Закрыть меню" onclick="close()">
<svg ...></svg>
</button>
<!-- Чек-бокс с лейблом — обязательно for/id связка -->
<label>
<input type="checkbox" id="agree" />
Согласен с условиями
</label>
<!-- Декоративная иконка — скрываем от скринридера -->
<button>
<svg aria-hidden="true">...</svg>
<span>Сохранить</span>
</button>До и после: тот же UI, но с правильной семантикой