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

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

HTML для доступности — это не про «красоту кода», а про смысл. Когда заголовки, списки и кнопки размечены правильно, скринридер читает страницу понятнее, а пользователю проще пройти путь без догадок.

Проверь базу:
— h1-h6 строят иерархию, а не просто крупный текст
— nav, main, article, footer помогают разделить зоны страницы
— button нужен для действия, а a — для перехода
— ul/ol и li лучше, чем «список» через div и переносы

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

Для форм тоже важен смысл: label должен быть связан с полем, а ошибки — объяснять, что именно исправить. И не забывайте про alt у изображений: если картинка несёт смысл, он должен быть в тексте; если это декор, он не должен отвлекать.

Семантика — это не «дополнительная опция», а основа понятного интерфейса. Начните с заголовков, ссылок и кнопок: если эти элементы размечены верно, доступность уже заметно лучше.