Доступность веб‑сайтов (a11y) помогает слепым, слабовидящим и пожилым пользователям, но одновременно улучшает SEO, UX и бизнес‑результаты. В этой статье вы узнаете, каких ошибок стоит избегать и как подготовить сайт к новым стандартам.
Что такое доступность (a11y) и почему это важно
Когда мы говорим о доступности сайтов (a11y), речь не только о «крупном шрифте».
Доступный сайт — это тот, которым могут пользоваться:
- люди с нарушениями зрения (слепые и слабовидящие)
- пожилые пользователи
- люди, которые используют клавиатуру вместо мыши
- пользователи с когнитивными особенностями
- все, кто читает контент с телефона в сложных условиях (яркое солнце, маленький экран, отвлекающие факторы…)
Иначе говоря, доступность — это не только «социальная ответственность», а вполне конкретный бизнес‑интерес.
Сайт, которым могут пользоваться все:
- имеет больший охват (больше потенциальных клиентов)
- подаёт сигнал качества Google и AI‑ассистентам
- снижает риск жалоб и юридических проблем
Кто выигрывает от доступного сайта
1. Пользователи с нарушениями зрения
Слепые и слабовидящие пользователи используют скринридеры (читалки экрана), такие как:
- NVDA, JAWS (Windows)
- VoiceOver (macOS, iOS)
- TalkBack (Android)
Если на странице нет логичной структуры заголовков, alt‑описаний к изображениям и правильно размеченных кнопок, скринридер «видит» только хаос.
Результат: пользователь покидает сайт через несколько секунд.
2. Пожилые пользователи и пользователи на мобильных устройствах
Даже люди без официальных диагнозов, связанных со зрением, часто испытывают сложности с:
- слишком мелким текстом
- низким контрастом
- кликабельными зонами, которые слишком малы
При этом большинство посещений сегодня приходит с мобильных устройств — где все эти проблемы заметны ещё сильнее.
3. Ваш SEO и видимость в AI
Доступный сайт, как правило:
- лучше структурирован (заголовки H1–H2, списки, ясные ссылки)
- семантически корректен (правильные HTML‑элементы)
- быстрее и проще индексируется
Это помогает:
- классическому SEO (результаты Google)
- новому AI‑поиску (ChatGPT, SGE, Perplexity и др.), потому что моделям проще понять, что находится на странице
Частые ошибки, которые мы видим на сайтах
1. Текст «заперт» в баннерах и картинках
Вместо обычного текста важные заголовки и слоганы размещены внутри PNG/JPG/WebP‑баннеров.
- Скринридер видит только «image.jpg».
- Google не может легко прочитать сообщение.
- На мобильном баннер часто становится мелким и нечитаемым.
Лучшее решение:
оставлять заголовок в виде обычного HTML‑текста, а визуальный стиль настраивать через CSS, а не через изображение.
2. Навигация, неработающая с клавиатурой
Типичные проблемы:
- кнопку бургер‑меню нельзя открыть клавишами Enter/Space
- фокус «проваливается» в меню и не может выйти обратно (пользователь застревает)
- выпадающие меню, которые открываются только при наведении мыши
Если пользователь не может перемещаться по сайту с помощью клавиши TAB, для него ваш сайт фактически не существует.
3. Низкий контраст и слишком мелкие шрифты
Популярные ошибки:
- светло‑серый текст на светлом фоне (например, #9CA3AF на #F3F4F6)
- слишком тонкое начертание шрифта
- размер текста меньше 14–16 px на десктопе и ещё меньше на мобильном
Результат — усталость глаз и высокий показатель отказов.
4. Плохие alt‑описания и заголовки
Alt‑текст у изображений часто бывает:
- пустым
- общим («картинка», «баннер»)
- или переполненным ключевыми словами
Alt‑описание должно отвечать на вопрос:
«Что должен узнать пользователь, чего он не может увидеть?»
С чего начать работу над доступностью — практичный мини‑чек‑лист
Не обязательно исправлять всё сразу. Начните с самых важных элементов на ключевых страницах (главная, услуги, контакты, самые читаемые статьи блога).
1. Проверьте структуру заголовков
- на каждой странице только один H1 (основной заголовок);
- для секций используйте H2, для подсекций — H3;
- заголовки — это не просто «стилизованный текст», а реальные heading‑элементы.
Это помогает и людям, и скринридерам «сканировать» страницу и быстро находить нужную информацию.
2. Протестируйте сайт только с клавиатурой
Без мыши используйте только:
- TAB (вперёд)
- SHIFT + TAB (назад)
- ENTER / SPACE (активация ссылки/кнопки)
- ESC (закрытие модального окна/меню)
Спросите себя:
- видно ли чётко, где находится фокус (обводка вокруг элемента)?
- можно ли открыть/закрыть меню и отправить форму, пользуясь только клавиатурой?
- застреваете ли вы где‑то на пути?
Если вы сами не можете выполнить базовые действия без мыши, пользователям с нарушением зрения ещё сложнее.
3. Проверьте контраст
Используйте бесплатные инструменты (например, WebAIM Contrast Checker) и проверьте:
- текст на фоне;
- кнопки и ссылки относительно фона.
Старайтесь соответствовать уровню контраста не ниже WCAG AA — это сегодня минимум хорошего UX.
4. Добавьте и исправьте alt‑описания
- для декоративных изображений (узоры, линии) alt можно оставить пустым;
- для иллюстраций, несущих смысл, напишите короткое и понятное описание.
Пример плохого alt‑текста:
«slika1»
Пример лучшего alt‑текста:
«Экран ноутбука с доступным сайтом и большой кнопкой “Отправить запрос”»
5. Протестируйте сайт со скринридером
Не нужно сразу становиться экспертом. Достаточно:
- включить VoiceOver (Mac / iPhone) или NVDA (Windows);
- зайти на свой сайт;
- попробовать выполнить ту же задачу, что и обычный пользователь (например, «отправить запрос»).
Вы быстро увидите слабые места: элементы без названий, нелогичный порядок, контент, который «пропускается».
Доступность и бизнес‑результаты: как это окупается
Это может звучать как дополнительные расходы, но у доступности есть вполне измеримые преимущества:
- Больше конверсий — более понятный текст, крупные кнопки и логичный путь по страницам помогают всем пользователям, а не только людям с инвалидностью.
- Лучший SEO и видимость в AI — структурированный и читаемый контент — именно то, что нужно и Google, и AI‑моделям.
- Укрепление бренда — вы показываете, что относитесь к пользователям серьезнее, чем конкуренты.
- Проще участвовать в тендерах и работать с крупными клиентами — всё больше компаний требуют от партнёров сайтов, соответствующих базовым стандартам a11y.
Как двигаться дальше
Если вы хотите системно подойти к доступности, хорошая стратегия может быть такой:
- провести базовый a11y‑аудит ключевых страниц;
- исправить критичные проблемы (навигация, формы, контраст);
- ввести гайды по контенту (как оформлять заголовки, alt‑тексты, призывы к действию);
- регулярно проверять новые страницы и функциональность.
Так доступность становится частью вашей ежедневной практики, а не разовым «проектом», о котором быстро забывают.