Часть 20 из 22

Доступность и SEO: одна работа — две награды

Поисковый краулер — функционально слепой пользователь с быстрым интернетом: он не видит дизайн, он парсит структуру документа. Поэтому почти всё, чего требует доступность, — семантика, иерархия, текстовые альтернативы, осмысленные имена ссылок — одновременно является входным сигналом SEO. А с июня 2025-го European Accessibility Act (EAA) делает доступность юридическим требованием для большинства потребительских цифровых сервисов в ЕС: то, что было «неплохо бы», теперь грозит штрафами.

Пересечение: одна правка — два бенефициара

  • Иерархия заголовков (h1h2h3, без пропусков, один h1) — это оглавление, по которому навигируют скринридеры, и структура, по которой краулеры и AI-движки извлекают и цитируют разделы.
  • Семантические ориентиры (<nav>, <main>, <article>, <footer>) объясняют и вспомогательным технологиям, и парсерам, что есть что. Суп из <div> хуже ранжируется и заваливает аудиты.
  • Alt-текст обслуживает скринридеры и поиск по картинкам одной и той же строкой.
  • Имена ссылок: «нажмите здесь» не проходит WCAG (ссылка должна быть понятна вне контекста) и выбрасывает сигнал анкора. Одна переформулировка чинит обе проблемы.
  • Атрибуты lang — на <html> и на иноязычных фрагментах — питают и произношение в скринридерах, и определение языка для вашего hreflang.
  • CLS — проблема доступности прежде, чем метрика: скачки вёрстки сильнее всего бьют по людям с моторными и зрительными ограничениями. Чинить Core Web Vitals — это работа над доступностью.

Доступность — не прямой фактор ранжирования, но её артефакты — парсимая структура, меньший bounce, более широкая аудитория — факторы самые прямые.

Next.js: зашейте это в пайплайн

// .eslintrc — jsx-a11y ловит пропущенные alt, кривые роли и безымянные контролы на этапе PR
{
  "extends": ["next/core-web-vitals", "plugin:jsx-a11y/recommended"]
}
  • next/image уже требует alt — не отмывайтесь пустым alt="" на содержательных картинках.
  • Ставьте <html lang={locale}> из параметра роута в корневом layout.
  • Гоняйте Lighthouse accessibility рядом с performance в CI — тулинг тот же, что уже стоит для мониторинга, просто ещё один порог.
  • Автоматика ловит ~30–40% проблем WCAG; прохождение главных сценариев только с клавиатуры ловит большую часть остального. Если до элемента не добраться табом — возможно, краулер не доберётся до него ссылками.

EAA: дедлайн, закрывающий дискуссию

С 28 июня 2025 года EAA применяется к e-commerce, банкингу, транспорту, электронным книгам и большинству потребительских цифровых сервисов, продаваемых в ЕС (микропредприятия до 10 сотрудников и €2 млн освобождены). Надзор национальный и работает по жалобам — недоступный чекаут теперь юридический риск, а не пункт бэклога. Практическая планка — WCAG 2.1 AA (через EN 301 549), ровно тот стандарт, в который целятся правки выше.

Чеклист:

  • Один h1 на страницу; уровни заголовков без пропусков; семантические ориентиры на месте
  • У каждой содержательной картинки настоящий alt; каждая ссылка понятна вне контекста
  • lang выставлен из локали на <html> и на иноязычных фрагментах
  • jsx-a11y в ESLint + порог Lighthouse a11y в CI; главные сценарии пройдены с клавиатуры
  • Применимость EAA оценена; потребительские сценарии соответствуют WCAG 2.1 AA

01—22

Все темы гайда

  1. 01Стратегия рендеринга: что на самом деле видит краулер?
  2. 02Metadata API: тайтлы, описания и паттерн с шаблоном
  3. 03Canonical и hreflang: одна страница — один адрес
  4. 04Open Graph и динамические OG-картинки
  5. 05sitemap.ts и robots.ts: файловые конвенции вместо рукописного XML
  6. 06Структурированные данные: JSON-LD, который приносит rich results
  7. 07Картинки, шрифты и скрипты: классическое трио производительности
  8. 08Core Web Vitals: три числа, которые измеряет Google
  9. 09Редиректы, 404 и коды ответов
  10. 10Кеширование и свежесть контента
  11. 11AEO/GEO: как попасть в ответы ChatGPT, Perplexity и Google AI Overviews
  12. 12Мониторинг: SEO — это цикл, а не задача на запуск
  13. 13Траст и E-E-A-T: как сделать сайт заслуживающим доверия
  14. 14Image SEO: как превратить картинки в трафик
  15. 15Внутренняя перелинковка и архитектура сайта
  16. 16Поисковые интенты: страницы под то, что люди реально ищут
  17. 17Programmatic SEO в Next.js: страницы в масштабе без спама
  18. 18SEO-миграция: переезд на Next.js без потери трафика
  19. 19Пагинация и фасетная навигация без раздувания индекса
  20. 20Доступность и SEO: одна работа — две награды
  21. 21Угасание контента: обновить, склеить или удалить
  22. 22Off-page для разработчиков: ссылки, которые не покупают

Нужно, чтобы это сделали за вас?

Я провожу аудит и чиню техническое SEO на сайтах Next.js — индексация, скорость, hreflang и видимость в AI.

Услуга «Техническое SEO»