HTML для доступности — это не про «красивую разметку», а про смысл. Скринридер читает страницу по структуре, и если заголовки, списки и кнопки размечены правильно, пользователю проще понять контент и пройти сценарий без лишних остановок.
Проверь базовый набор:
— заголовки идут по иерархии, без прыжков через уровни;
— списки оформлены тегами ul/ol, а не просто переносами строк;
— ссылки описывают действие или цель, а не «тут» и «подробнее»;
— кнопки остаются button, если по ним выполняется действие, а не переход.
Отдельно следи за div и span: это нейтральные контейнеры, они не добавляют смысла. Если блок можно описать как статью, навигацию, основное содержимое или подвал, лучше использовать семантические теги. Тогда браузер и ассистивные технологии понимают страницу без лишних подсказок.
Если нужен быстрый аудит, открой страницу без стилей и проверь, читается ли она как осмысленный текстовый документ. Если нет, семантика собрана плохо. Начинайте с структуры, а визуальные эффекты добавляйте потом — доступность на WordPress почти всегда выигрывает именно от этого.
Доступность сайтов на WordPress
@wp_accessibility_lab_ww
Семантика HTML: какие теги помогают доступности, а какие только мешают
Этот пост опубликован в Telegram-канале Доступность сайтов на WordPress. Подписаться можно по ссылке: @wp_accessibility_lab_ww.