HTML-семантика ломает доступность, когда теги стоят «для красоты»

HTML-семантика ломает доступность, когда теги стоят «для красоты»

Если заголовок выглядит как кнопка, а ссылка спрятана в <div>, скринридер читает страницу хуже, чем нужно. Семантика нужна не для SEO-галочки, а чтобы смысл элементов совпадал с их ролью.

Проверь базовые вещи:
— <h1>–<h6> идут по иерархии, а не по размеру шрифта
— списки оформлены через <ul> и <ol>, а не через абзацы с тире
— интерактивные элементы остаются интерактивными: ссылка — <a>, кнопка — <button>

Отдельно смотри на <main>, <nav>, <header>, <footer>. Эти ориентиры помогают быстро перескочить к нужному блоку и понять структуру страницы. Если всё собрано в один <div>, навигация становится длиннее и утомительнее.

Не менее важны подписи к картинкам, корректные таблицы и alt там, где изображение несёт смысл. Если элемент декоративный, он не должен мешать чтению; если информативный — смысл должен быть доступен без визуального контекста.

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