HTML-семантика ломает доступность чаще, чем визуальная верстка

HTML-семантика ломает доступность чаще, чем визуальная верстка

Если на странице всё собрано из div и span, скринридер видит не смысл, а набор блоков. Для пользователя это означает лишние проходы по контенту, потерю структуры и сложность в навигации.

Семантика в WordPress нужна не для красоты кода, а для понятных ориентиров:
— h1–h6 выстраивают иерархию;
— nav, main, header, footer, article, section помогают быстро найти нужный кусок;
— button и a не заменяют друг друга, потому что у них разное поведение;
— ul, ol и li делают списки списками, а не просто строками с маркерами.

Типовая ошибка — использовать div вместо кнопки или ссылки. Визуально всё выглядит нормально, но клавиатурная навигация и озвучивание ломаются. Ещё одна проблема — пропуск заголовков: когда после h1 сразу идёт h4, структура становится рваной и непредсказуемой.

Проверяйте шаблон не глазами, а по смыслу: заголовок — заголовком, список — списком, основной контент — main, повторяющиеся блоки — article. Если элемент можно назвать по роли, а не по внешнему виду, вы уже ближе к доступному HTML.

Семантика — это карта страницы для людей и ассистивных технологий: чем она точнее, тем легче читать, искать и понимать контент.