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

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

Для доступности важны не «красивые» обёртки, а смысл. Тег должен описывать роль блока: заголовок — это h1-h6, список — ul/ol, цитата — blockquote, кнопка — button, а не набор div и span с классами.

Проверяйте логику страницы по простому правилу: если элемент можно понять без стилей, семантика есть. Если смысл появляется только после CSS или JS — для скринридера это уже риск. Особенно часто путают:
— кликабельный div вместо кнопки;
— иконку вместо текстовой подписи;
— заголовок, который сделан ради размера, а не структуры.

У семантики есть прямой эффект: она задаёт порядок чтения, помогает навигации по странице и сокращает число «пустых» элементов в дереве. Но не переусердствуйте: один блок = один смысл. Если внутри карточки есть ссылка, заголовок и описание, не заворачивайте всё в один интерактивный контейнер без необходимости.

Для WordPress это особенно заметно в шаблонах, блоках и меню. Когда разработчик берёт правильный тег сразу, потом не приходится чинить фокус, роли и озвучку. Семантика — это не украшение кода, а основа понятной страницы.