Семантика HTML: 7 тегов, которые реально помогают скринридеру и структуре

Семантика HTML: 7 тегов, которые реально помогают скринридеру и структуре

Семантика — это не «красивый HTML», а понятные роли для контента. Когда заголовки, списки и кнопки размечены правильно, пользователь быстрее ориентируется, а скринридер строит страницу без лишнего шума.

Проверьте базу:
— h1-h6 — только для иерархии, не для «размера шрифта»
— nav, main, footer — чтобы отделить зоны страницы
— button вместо кликабельного div
— label связан с полем формы, а не стоит отдельно
— ul/ol там, где есть настоящий список, а не набор абзацев

Отдельно следите за ссылками. Текст вроде «читать далее» или «подробнее» без контекста бесполезен: у ссылки должно быть понятное название. То же касается strong и em: они нужны для смысла, а не для визуального акцента. Если хочется просто сделать слово жирным — это не всегда оправдано с точки зрения доступности.

Полезная проверка простая: откройте страницу без стилей и прочитайте её по порядку. Если заголовки, списки и кнопки всё ещё складываются в понятную схему, семантика работает. Если нет — верстка требует правки.

Начните с заголовков, кнопок и форм: именно там семантика чаще всего ломает доступность.