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

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

Для доступности важен не внешний вид, а смысл структуры. Если заголовки, списки и цитаты размечены правильно, пользователь быстрее понимает страницу и легче по ней перемещается.

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

Отдельно проверь figure/figcaption для изображений с пояснением, blockquote для цитат и table только для таблиц, а не для раскладки. Если элемент несёт смысл, он должен быть размечен семантически; если смысл теряется, скринридер тоже теряет контекст.

Итог простой: сначала выбирайте тег по роли элемента, потом — по дизайну. Так сайт становится понятнее и для людей, и для ассистивных технологий.