Доступность сайта и SEO в 2026 году: сделайте контент и заявки понятными большему числу людей

02

Семантическая структура документа

Используйте header, nav, main, article, aside и footer по назначению. Один основной H1 описывает страницу, а H2 и H3 формируют логичную иерархию без скачков ради размера шрифта. Экранный диктор и поисковик получают карту материала. Визуальный дизайн задается CSS, поэтому заголовок не превращают в div только из-за нужного начертания.

Список оформляют ul или ol, таблицу — table с заголовками, кнопку действия — button, переход — ссылкой. Самодельные интерактивные div требуют ручного управления ролями, клавиатурой и состояниями, что часто забывают. Нативные элементы дают большую часть поведения бесплатно и уменьшают число ошибок в мобильном меню, FAQ и фильтрах.

03

Навигация с клавиатуры и видимый фокус

Пройдите страницу клавишей Tab от начала до конца. Порядок фокуса следует визуальной логике, текущий элемент заметен, выпадающее меню открывается и закрывается, модальное окно не уводит фокус за себя. Ссылка для перехода к основному содержимому помогает пропустить длинную навигацию. Ни один блок не превращается в клавиатурную ловушку.

На мобильном проверьте внешнюю клавиатуру и программы экранного доступа, но базовый desktop-тест уже находит много проблем. Не убирайте outline без полноценной замены. Фокус должен контрастировать с фоном и не скрываться под фиксированной шапкой. Эти детали особенно важны для формы: пользователь должен видеть, где вводит имя и телефон.

04

Формы, подписи и ошибки

Каждое поле получает видимую label, связанную с input. Placeholder показывает формат, но не заменяет подпись: он исчезает при вводе и часто имеет слабый контраст. Для заявки нужны понятные поля «Имя», «Сайт» и «Телефон», отмеченные обязательные значения и согласие на обработку данных. Автозаполнение и корректный input type упрощают мобильный ввод.

Ошибка объясняет, что исправить, и программно связана с полем. Одного красного цвета недостаточно. После отправки сообщите результат и не сбрасывайте данные при сетевой ошибке. Маска российского номера принимает вставку и клавиатурный ввод, а кнопка не активирует двойную отправку. Доступная форма одновременно снижает потери лидов у всех пользователей.

05

Контраст, масштабирование и изображения

Текст и элементы управления должны сохранять читаемость на своих фонах. Проверьте зеленые подписи на белом, серый текст, состояния hover и disabled. При увеличении до 200 процентов содержание не перекрывается, кнопки не обрезают длинные слова, а горизонтальная прокрутка не нужна для обычного текста. Не запрещайте масштабирование viewport.

Информативное изображение получает краткий alt по функции и контексту. Декоративное — пустой alt, чтобы диктор его пропустил. Сложный график сопровождается видимым объяснением данных; длинное описание не прячут в набор ключей. Фотография не заменяет доказательство текстом: имена, роли или вывод кейса должны оставаться доступными рядом.

06

Как проводить проверку и расставлять приоритеты

Автоматические инструменты находят часть проблем: отсутствие label, контраст, повторяющиеся ID и некоторые ошибки ARIA. Затем обязательны ручные сценарии: клавиатура, диктор, увеличение, мобильное меню, форма и модальное окно. Проверяйте типовые шаблоны, потому что общий компонент может повторять одну ошибку на сотнях страниц.

Приоритет получают блокеры заявки и доступа к основному контенту, затем навигация, структура, медиа и улучшения удобства. Формулируйте задачи с примером, ожидаемым поведением и способом проверки. Итог измеряют не только аудитом, но и ошибками форм, завершением сценариев и обратной связью пользователей. Так доступность становится частью качества продукта, а не значком в футере.

Практика

Что проверить на своем сайте

1. Проверить иерархию заголовков
2. Пройти страницу клавиатурой
3. Проверить фокус
4. Связать label и поля
5. Проверить контраст и масштаб
6. Проверить alt и сложную графику