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

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

Если разметка сделана «по смыслу», скринридер читает страницу предсказуемо, а не как набор случайных блоков. Для этого не обязательно усложнять код — достаточно правильно выбирать теги и не подменять их div-ами.

• h1-h6 — строят иерархию страницы. Заголовки должны идти по смыслу, а не по размеру шрифта.
• nav, main, footer — помогают быстро понять, где меню, основной контент и подвал.
• button вместо кликабельного div — сразу даёт клавиатурную доступность и понятную роль.
• label связывает подпись и поле ввода, а не оставляет форму «немой».
• ul/ol нужны для списков, а не для любого визуального отступа.

Частая ошибка — использовать теги только ради внешнего вида. Тогда strong превращают в «жирный текст», а заголовки ставят ради размера. В результате нарушается логика чтения, навигация по странице становится рваной, а структура теряет смысл.

Ещё один важный момент: семантика не заменяет доступность полностью, но задаёт её основу. Если тег выбран правильно, дальше проще добавить фокус, подписи, альтернативный текст и корректные состояния элементов. ♿

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