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

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

На WordPress часто ставят нужный текст, но забывают про смысл разметки. Для скринридера это критично: он читает не «как выглядит», а «что это». Если элементы собраны из одних div и span, навигация становится шумной и тяжёлой.

Используйте по назначению:
• <h1>–<h6> для структуры, а не для размера
• <nav> для меню, <main> для главного контента
• <button> вместо кликабельного div
• <label> в паре с полем формы
• <ul>, <ol>, <li> для списков
• <article>, <section> для логичных блоков

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

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

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