Семантика HTML, которая помогает скринридеру читать сайт без спотыканий

Семантика HTML, которая помогает скринридеру читать сайт без спотыканий

Когда на странице есть только div и span, пользователю с ассистивными технологиями приходится угадывать структуру. Семантические теги дают смысл: заголовки, навигация, основной контент, статьи, списки и формы становятся понятнее не только поиску, но и людям.

Что стоит использовать в первую очередь:
— header, nav, main, footer — для общей структуры страницы
— article и section — для логических блоков, а не для красивой раскладки
— h1–h6 — для иерархии заголовков, без прыжков через уровни
— button, a, label, ul, ol — вместо кликабельных div и текста без смысла

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

Семантика особенно важна в WordPress-контенте: шаблон, блоки и виджеты часто плодят лишнюю вложенность. Проверяйте, есть ли на странице один main, не дублируются ли заголовки, подписаны ли поля формы, и не спрятаны ли важные ссылки за пустыми иконками.

Чем яснее структура HTML, тем меньше догадок у пользователя и тем выше шанс, что сайт будет удобен всем. Начните с заголовков, навигации и форм — именно там чаще всего теряется доступность.