Семантика HTML, которая делает сайт понятным для скринридеров

Семантика HTML, которая делает сайт понятным для скринридеров

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

Для доступности особенно важны:
• header, nav, main, footer — задают крупные зоны страницы;
• article и section — помогают отделять смысловые блоки;
• button вместо кликабельного div, а ссылка — только для перехода;
• label, fieldset, legend — для форм, где без подписей люди теряются.

Есть и частые ошибки. Заголовки нельзя прыгать с h1 сразу на h4: это ломает и структуру, и восприятие. Не используйте списки ради визуального отступа, если там нет пунктов. Не прячьте важный текст в aria-label, если его можно нормально вывести в DOM: видимый контент надёжнее.

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