Доступность

Как работает

Доступность (a11y) обеспечивает работу сайта для людей, которые используют вспомогательные технологии: скринридеры, увеличение экрана, навигацию с клавиатуры без мыши. Основной ориентир — рекомендации WCAG, которые описывают требования к контрасту, текстовым альтернативам, управлению с клавиатуры и понятной структуре.

Практически это означает семантическую вёрстку: заголовки в тегах от <h1> до <h6>, кнопки в <button>, ссылки в <a>, а не в стилизованных <div>. Для сложных интерфейсов применяют ARIA-атрибуты, которые сообщают вспомогательным технологиям роль и состояние элемента — например, что блок является модальным окном или что вкладка активна. Изображениям задают alt-текст, полям форм — связанные подписи, интерактивным элементам — видимый фокус при навигации с клавиатуры.

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

Почему важно для SEO

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

Читаемость текста — понятный язык, короткие абзацы — тоже общий фактор; ей посвящена карточка readability. Семантическая вёрстка облегчает роботу извлечение смысла, а удобная навигация с клавиатуры косвенно улучшает поведенческие сигналы для всех пользователей.

Доступность не заменяет SEO и не является прямым фактором ранжирования, но их требования во многом совпадают, поэтому работать над ними выгодно вместе. Есть и практическая сторона: близость к стандартам WCAG расширяет аудиторию сайта и снижает риск претензий со стороны пользователей, которым иначе интерфейс недоступен.

Частые ошибки

• Кнопки и ссылки на <div> и <span> без семантики — недоступны с клавиатуры и непонятны боту.
• Изображения без alt или с бессмысленным alt вроде «img_1234».
• Низкий контраст текста и фона — текст нечитаем для слабовидящих.
• Сломанная иерархия заголовков: пропуск уровней, несколько H1 без причины.
• Поля форм без связанных подписей <label>.
• Отсутствие видимого фокуса при навигации клавишей Tab.

Как проверить

Быстрый аудит доступности дают Lighthouse во вкладке Accessibility и расширение axe DevTools — они находят проблемы контраста, отсутствующие alt и подписи. Навигацию проверяют вручную клавишей Tab: до всех интерактивных элементов должен быть доступ, а фокус — виден. Скринридеры VoiceOver и NVDA показывают, как страница звучит для незрячего пользователя.

Часть проблем доступности пересекается с SEO-дефектами. SEO Crawler при обходе находит изображения без alt и нарушения структуры заголовков — те же ошибки, что мешают и скринридерам, и поисковику, поэтому исправление закрывает сразу две задачи.

Вывод

Пригодный для людей с ограничениями сайт заодно понятнее и поисковику: семантика, alt-тексты и структура заголовков полезны обоим. Ведите a11y и SEO вместе — их требования во многом совпадают, а исправления пересекаются.