Главная Статьи Оптимизация

Доступность сайта (accessibility)

Сайтом пользуются очень разные люди: кто-то не видит и слушает страницу голосовым помощником, кто-то не пользуется мышью, кто-то плохо различает цвета. Доступность — это про то, чтобы сайт был удобен всем, а не только «среднему» посетителю. И приятный бонус: почти всё, что делает сайт доступным, заодно помогает и SEO. Разберём базу. Один из базовых пунктов — читаемый контраст текста и фона: пары цветов проверяются в проверке контраста.

Что такое доступность

Доступность (по-английски accessibility, сокращённо a11y) — это свойство сайта быть пригодным для людей с разными возможностями: для незрячих и слабовидящих, для тех, кто управляет только клавиатурой, плохо различает цвета или испытывает трудности с мелким текстом. Незрячие, например, «слушают» сайт через программу-скринридер, которая читает содержимое вслух — и от того, как сделан сайт, зависит, поймёт ли человек, что на странице.

Зачем это нужно

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

База доступности (и заодно SEO)

🖼 Alt у картинок
Текстовое описание изображения — его читает скринридер и видит поиск.
+ SEO
🔤 Заголовки по порядку
Один H1, дальше H2–H3 по смыслу. Структура помогает и навигации, и поиску.
+ SEO
🎨 Контраст текста
Тёмный текст на светлом фоне (и наоборот). Бледно-серое на белом читают не все.
⌨️ Навигация с клавиатуры
По сайту можно ходить клавишей Tab, видя, где сейчас фокус.
🏷 Подписи к полям форм
У каждого поля — понятная подпись, а не только серый плейсхолдер.
🧱 Семантическая вёрстка
Использовать теги по назначению (заголовки, списки, кнопки, ссылки), а не «div на всё».
+ SEO

Где доступность и SEO совпадают

Это самое приятное. Атрибут alt у картинок нужен и скринридеру, и поиску по картинкам. Правильная иерархия заголовков H1–H6 помогает и незрячему ориентироваться, и поисковику понимать структуру. Осмысленный текст ссылок (вместо «нажмите сюда») полезен и тем, и другим. Семантические теги делают страницу понятной и роботу, и вспомогательным программам. Поэтому работа над доступностью почти всегда улучшает и техническое SEO — без отдельных усилий.

⚠️ Доступность — это про реальную пригодность, а не про значок «сайт доступен». Не имитируйте: alt должен описывать картинку, а не быть набором ключей; заголовки — отражать структуру, а не просто «выглядеть крупно». Поддельная доступность не помогает ни людям, ни поиску, как и поддельные сигналы доверия.

WCAG: международный стандарт

У доступности есть формальный стандарт — WCAG (Web Content Accessibility Guidelines), свод рекомендаций, как сделать веб пригодным для всех. В нём три уровня соответствия. A — базовый минимум, без которого частью сайта пользоваться невозможно. AA — практический ориентир, к которому стремятся: достаточный контраст, навигация с клавиатуры, подписи к элементам; именно AA обычно требуют законы о доступности в разных странах. AAA — самый строгий, для специализированных случаев, целиком его выполняют редко. Для большинства сайтов разумная цель — уровень AA. Знать про WCAG полезно, но начинать стоит не с чтения стандарта, а с базовых вещей вроде alt и контраста — они закрывают большую часть требований.

Как проверить доступность

Проверка доступности сочетает автоматику и ручной труд. Автоматические инструменты — вкладка Accessibility в Lighthouse (встроена в браузер) и расширения вроде axe — быстро находят явные проблемы: пропущенные alt, низкий контраст, поля без подписей. Но они ловят не всё, поэтому добавляют ручные проверки. Пройдите по сайту одной клавиатурой, клавишей Tab: можно ли добраться до всех ссылок и кнопок и видно ли, где сейчас фокус. Проверьте контраст текста. А лучший тест — включить скринридер (он есть в любой системе) и «послушать» страницу: если по звуку понятно, что на ней и как ею пользоваться, доступность в порядке.

ARIA: когда нужны атрибуты

Для сложных интерфейсов есть набор специальных атрибутов — ARIA (например, aria-label, aria-hidden, role). Они подсказывают вспомогательным программам то, что не выражается обычными тегами: что вот этот элемент — вкладка, а этот — всплывающее меню, и в каком он состоянии. ARIA нужна для нестандартных виджетов: слайдеров, выпадающих меню, модальных окон. Но есть важное правило: «никакой ARIA лучше плохой ARIA». Если задачу решает обычный семантический тег — кнопка через button, заголовок через h2, — используйте его, а не навешивайте role на div. Неправильно применённая ARIA путает скринридер сильнее, чем её отсутствие. Сначала семантика, ARIA — только там, где без неё никак.

Частые барьеры

Большинство проблем доступности — это одни и те же типовые барьеры. Картинки без alt — скринридер молчит или читает имя файла. Низкий контраст — бледно-серый текст на белом, который не все различают. Сайт, работающий только мышью, без доступа с клавиатуры. Плейсхолдер вместо подписи поля — он исчезает, когда начинаешь печатать, и человек забывает, что вводил. Капча с распознаванием картинок, непроходимая для незрячих. Автоматически запускающееся видео со звуком. И «div на всё» вместо нормальных кнопок и ссылок. Убрав эти барьеры, вы делаете сайт доступным процентов на восемьдесят — и заодно чище для поиска.

Коротко

Доступность (accessibility, a11y) — это пригодность сайта для всех, включая незрячих, людей без мыши и тех, кто плохо различает цвета. Базу составляют alt у картинок, правильная иерархия заголовков, достаточный контраст, навигация с клавиатуры, подписи к полям форм и семантическая вёрстка. Большая часть этого совпадает с техническим SEO: поисковый робот воспринимает сайт похоже на скринридер — по тексту и структуре. Поэтому делая сайт доступнее, вы заодно помогаете и продвижению.

Частые вопросы

Что такое доступность сайта (accessibility)?
Это свойство сайта быть удобным для людей с разными возможностями: незрячих и слабовидящих, тех, кто управляет только клавиатурой, плохо различает цвета или испытывает трудности с мелким текстом. Например, незрячие пользуются сайтом через программу-скринридер, которая читает содержимое вслух. Сокращённо доступность называют a11y.
Зачем сайту доступность?
Во-первых, это аудитория и клиенты, которых недоступный сайт просто теряет. Во-вторых, доступные решения (контраст, понятная навигация, крупный текст) удобны вообще всем, особенно на телефоне или ярком солнце. В-третьих, доступность сильно пересекается с SEO: поисковый робот воспринимает сайт по тексту и структуре, похоже на скринридер.
Как связаны доступность и SEO?
Очень тесно. Alt у картинок нужен и скринридеру, и поиску по картинкам. Правильная иерархия заголовков H1–H6 помогает ориентироваться и незрячему, и поисковику. Осмысленный текст ссылок и семантическая вёрстка полезны обоим. Поэтому работа над доступностью почти всегда заодно улучшает техническое SEO.
С чего начать делать сайт доступным?
С базовых вещей: добавьте осмысленные alt к картинкам, выстройте заголовки по порядку (один H1, далее H2–H3 по смыслу), обеспечьте достаточный контраст текста и фона, проверьте навигацию с клавиатуры (клавишей Tab), добавьте подписи к полям форм и используйте семантические теги вместо сплошных div. Это закрывает большую часть проблем.
Влияет ли доступность на позиции в поиске?
Прямого фактора «доступный сайт — выше позиции» нет. Но многое из доступности совпадает с техническим SEO (alt, заголовки, семантика, понятные ссылки), а это поиск учитывает. Плюс доступный сайт обычно удобнее, что улучшает поведенческие факторы. Так что косвенно доступность работает на продвижение.
Что такое WCAG и какой уровень нужен?
WCAG — международный стандарт доступности с тремя уровнями: A (базовый минимум), AA (практический ориентир — контраст, навигация с клавиатуры, подписи; его требуют законы о доступности) и AAA (самый строгий, для специальных случаев). Для большинства сайтов разумная цель — уровень AA, а начинать стоит с базовых вещей вроде alt и контраста.
Как проверить доступность сайта?
Сочетайте автоматику и ручную проверку. Автоматически — вкладка Accessibility в Lighthouse и расширение axe (находят пропущенные alt, низкий контраст, поля без подписей). Вручную — пройдите по сайту одной клавиатурой (Tab), проверьте контраст и «послушайте» страницу скринридером. Если по звуку понятно, что на странице и как ею пользоваться, доступность в порядке.
Когда нужны ARIA-атрибуты?
Для сложных нестандартных виджетов — слайдеров, выпадающих меню, модальных окон, — где обычные теги не передают суть. Главное правило: «никакой ARIA лучше плохой ARIA». Если задачу решает семантический тег (button, h2), используйте его, а не навешивайте role на div. Неправильная ARIA путает скринридер сильнее, чем её отсутствие.

🛠 Полезные инструменты

Анализ сайтаСинонимайзерПроверка ИКСПодбор ключейЧастотность запросовТошнота текстаПревью сниппетаПроверка индексации

📚 Читайте также