<b>Семантика HTML: 6 тегов, которые реально помогают скринридерам</b>

<b>Семантика HTML: 6 тегов, которые реально помогают скринридерам</b>

Семантика — это не «красивый код», а понятные роли для контента. Когда на сайте всё собрано из <code>div</code> и <code>span</code>, ассистивным технологиям сложнее понять, где меню, где статья, а где кнопка.

Для структуры используйте теги по назначению: <code>header</code>, <code>nav</code>, <code>main</code>, <code>article</code>, <code>aside</code>, <code>footer</code>. Они помогают быстро ориентироваться по странице и сокращают число лишних переходов. Если раздел важный — не прячьте его в универсальный контейнер без смысла.

Отдельно следите за интерактивом: ссылка должна вести, кнопка — выполнять действие. Не делайте кликабельный <code>div</code>, если можно поставить <code>button</code> или <code>a</code>. Для заголовков держите иерархию <code>h1</code> → <code>h2</code> → <code>h3</code> без скачков и без выбора уровня «по размеру шрифта».

И ещё один частый промах: семантика ломается, когда визуальный вид важнее логики. Список должен быть списком, таблица — таблицей, а не набором блоков. Для картинок не забывайте <code>alt</code>: если изображение несёт смысл, текст должен его передавать; если декорирует — описание не нужно.

Проверяйте страницу так: можно ли понять её структуру без мыши и без зрения? Если нет, значит HTML пока работает на дизайн, а не на доступность.