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

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

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

Для доступности особенно важны: header, nav, main, article, section, aside, footer. Они помогают не только экранным читалкам, но и тем, кто перемещается по странице через список заголовков или быстрые переходы. Если вместо них всюду стоят div, смысл страницы приходится угадывать.

Отдельно следите за заголовками: один h1 на страницу, дальше — логичная иерархия h2, h3. Не перескакивайте уровни ради размера текста. И не используйте заголовок как декоративный элемент: если это не раздел, не делайте его заголовком.

Ещё один частый промах — кнопки и ссылки. Для действия используйте button, для перехода — a. Если кликабельный блок не имеет понятной роли, пользователю с клавиатурой сложнее понять, как с ним взаимодействовать.

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