❌ Ошибка 1: используют <div> вместо семантики
Как ломается: весь макет собран из одинаковых <div>. Визуально страница та же, но дерево доступности пустое — скринридер не предложит «перейти к навигации» или «к основному содержимому».
<div class="header">…</div>
<div class="content">…</div>
<div class="footer">…</div>✅ Как правильно
Выбирайте элемент по роли блока: <header>, <nav>, <main>, <article>, <aside>, <footer>.
<header>…</header>
<main>…</main>
<footer>…</footer>❌ Ошибка 2: несколько <main> на странице
Как ломается: два <main> в одном документе. По спецификации видимым должен быть только один — иначе ассистивные технологии не понимают, где настоящее основное содержимое.
<main>…</main>
<main>…</main> <!-- лишний -->✅ Как правильно
Оставляйте один <main>, а внутри размещайте <section>, <article> и <aside>.
❌ Ошибка 3: <nav> для любой панели с кнопками
Как ломается: <nav> вешают на панель действий (кнопки «Сохранить», «Удалить»). Скринридер объявит её как навигацию по сайту, хотя это не ссылки на разделы — пользователь запутается.
✅ Как правильно
<nav> — только для блоков навигационных ссылок (меню, оглавление). Для панели кнопок используйте обычный контейнер.
❌ Ошибка 4: <figure> без подписи, когда подпись нужна
Как ломается: иллюстрация поясняет материал, но без <figcaption> её смысл и связь с текстом теряются.
✅ Как правильно
Добавляйте <figcaption>, если у иллюстрации есть важный комментарий.