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

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

В доступном WordPress-сайте семантика HTML важнее красивой верстки. Скринридер не «видит» блоки, он читает структуру: заголовки, списки, кнопки, ссылки, области страницы. Если вместо смысла везде div и span, пользователь теряет ориентиры и начинает угадывать, где он находится.

Базовый минимум:
— h1–h6: только для иерархии заголовков, не для размера текста
— p: обычные абзацы, а не «контейнеры для всего»
— ul/ol/li: списки вместо набора строк через
— button: для действий, a: для переходов
— nav, main, header, footer, article, section: для логики страницы
— label: всегда связывайте с полем формы

Особенно осторожно с интерактивом. Если ссылка открывает меню, модалку или фильтр, это уже не ссылка, а кнопка. Если иконка несет смысл, ей нужен понятный текст или скрытая подпись; если смысл декоративный, ее надо скрыть от скринридера. Чистый визуал без семантики для ассистивных технологий превращается в шум.

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