Основы веб-доступности: зачем она нужна и 10 быстрых улучшений

Веб-доступность (часто сокращают до a11y) означает, что сайтом могут пользоваться все — в том числе люди с нарушениями зрения, слуха, моторики или восприятия, а также любой человек в непростой ситуации: яркое солнце, треснувший экран, занятая рука. Это важно, потому что расширяет аудиторию, делает сайт удобнее для всех посетителей, помогает SEO, а в ЕС всё чаще становится требованием закона. Хорошая новость: многие из самых заметных улучшений делаются быстро и недорого.

Ниже — кому это помогает, чего требует стандарт WCAG и десять быстрых улучшений, которые можно проверить на своём сайте уже на этой неделе.

#Кому помогает доступный сайт

Доступность — это не нишевая функция «для пары пользователей». Удобно думать о трёх группах:

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

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

#Почему веб-доступность важна для бизнеса

#Больше клиентов

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

#Удобнее для всех

Доступность и хороший UX во многом совпадают: понятные подписи, заметный фокус, логичная структура, читаемый текст и «прощающие» формы помогают каждому посетителю. Это один из ключевых принципов в нашем гайде о том, как сделать хороший UI/UX.

#Поддержка SEO

Поисковики читают страницу во многом так же, как экранный чтец: заголовки, текст ссылок, alt-тексты изображений, чистая HTML-структура. Доступность не гарантирует позиций, но те же основы, что помогают вспомогательным технологиям, помогают и Google понять ваш контент, — многие из них есть в нашем SEO-чек-листе перед запуском.

#Требования закона

Европейский акт о доступности (European Accessibility Act) с 28 июня 2025 года действует для целого ряда продуктов и услуг для потребителей в ЕС — в том числе для интернет-торговли, банковских услуг, электронных книг и пассажирских перевозок. Микропредприятия, оказывающие услуги (меньше 10 сотрудников и оборот или баланс до 2 млн евро в год), от него освобождены. Для сайтов госсектора в ЕС собственные требования по доступности действуют уже давно. Если вы продаёте клиентам в Румынии или других странах ЕС, проверьте, какие правила касаются вас, — эта статья не юридическая консультация.

#WCAG за одну минуту

Руководство по доступности веб-контента (WCAG), которое публикует W3C, — это международный стандарт. Актуальная версия — WCAG 2.2 (рекомендация W3C с октября 2023 года); она развивает WCAG 2.1, на которую ссылается европейский стандарт EN 301 549. Большинство законов и политик ориентируются на уровень AA. Стандарт строится на четырёх принципах:

Заучивать весь стандарт не нужно. Краткий справочник WCAG и курс по доступности на web.dev — отличная отправная точка для вашего разработчика.

#10 быстрых улучшений доступности

#1. Достаточный цветовой контраст

Обычному тексту нужен контраст с фоном не ниже 4,5:1, крупному тексту и элементам интерфейса вроде рамок полей и иконок — не ниже 3:1. Светло-серый текст на белом — самая частая ошибка. Проверить можно в DevTools браузера или любом сервисе проверки контраста.

#2. Не полагайтесь только на цвет

«Обязательные поля выделены красным» не работает для людей с дальтонизмом. Добавьте текст, иконку или узор: звёздочку плюс слово «обязательно», значок ошибки рядом с сообщением.

#3. Alt-текст для значимых изображений

Опишите то, что важно на картинке: alt="Синяя керамическая кружка, 350 мл" для фото товара. Декоративные изображения получают пустой alt="", чтобы экранный чтец их пропускал.

#4. Настоящие заголовки в правильном порядке

Один H1, затем H2 и H3 в логичной иерархии — а не жирный текст, который притворяется заголовком. Пользователи экранных чтецов перескакивают по заголовкам, чтобы быстро просмотреть страницу, — так же, как зрячие пробегают её глазами.

#5. Всё работает с клавиатуры

Попробуйте пройти сайт только клавишами Tab, Shift+Tab, Enter и Пробел. Можно ли добраться до каждой ссылки, открыть меню, заполнить форму и закрыть всплывающее окно? Видно ли, где вы сейчас находитесь?

#6. Заметный фокус

Никогда не убирайте обводку фокуса, ничем её не заменив. Понятный стиль фокуса — это пара строк CSS:

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

currentColor берёт цвет текста элемента, поэтому обводка остаётся заметной и на светлом, и на тёмном фоне. Если выбираете фирменный цвет, проверьте, что его контраст с фоном не ниже 3:1.

#7. Подписи у каждого поля формы

Плейсхолдер — это не подпись: он исчезает, как только человек начинает печатать. Каждому полю нужен видимый связанный <label>, а ошибки должны объяснять, как исправить проблему, и появляться рядом с полем.

#8. Кнопки и ссылки, которые говорят, что делают

«Нажмите здесь» и «Подробнее» без контекста ничего не значат. «Скачать прайс-лист (PDF)» или «Подробнее о доставке» понятно всем. Используйте настоящие <button> и <a>, а не кликабельные <div>.

#9. Достаточно крупные элементы для касания

WCAG 2.2 (критерий 2.5.8, уровень AA) требует, чтобы элементы были не меньше 24×24 CSS-пикселя или имели достаточно свободного места вокруг. Для комфортного нажатия Apple рекомендует 44×44 pt, а Material Design от Google — 48×48 dp. Больше всего это важно на телефонах — подробнее в гайде про mobile-first дизайн.

#10. Уважайте настройки пользователя

Текст должен увеличиваться, когда человек меняет размер шрифта, вёрстка не должна ломаться при масштабе 200%, язык страницы должен быть указан (<html lang="ru">), чтобы экранный чтец правильно произносил текст, а анимации стоит приглушать для тех, кто включил «уменьшение движения».

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

1. Тест клавиатурой: отключите мышь на пять минут и попробуйте выполнить главную задачу.
2. Тест масштабом: поставьте масштаб браузера 200% и проверьте, что ничего не наезжает и не пропадает.
3. Автоматическая проверка: запустите Lighthouse в Chrome DevTools (раздел Accessibility). Он находит частые проблемы вроде отсутствующих alt-текстов или низкого контраста — но не всё.
4. Тест экранным чтецом: попробуйте VoiceOver (встроен в Mac и iPhone), TalkBack (Android) или бесплатный NVDA (Windows) на ключевой странице хотя бы несколько минут. Это открывает глаза.
5. Спросите реальных людей: по возможности пригласите в тестирование человека, который пользуется вспомогательными технологиями.

#FAQ

#Обязательна ли веб-доступность по закону в Молдове?

Требования в Молдове зависят от отрасли и меняются, поэтому детали для вашего случая лучше уточнить у юриста. Если вы продаёте потребителям в ЕС, Европейский акт о доступности может касаться вас, даже если компания зарегистрирована в Молдове. В любом случае WCAG 2.2 уровня AA — безопасная и общепринятая цель.

#Доступный сайт — значит скучный?

Нет. Доступные сайты бывают яркими, смелыми и современными: у этого сайта кислотно-лаймовый акцент на почти чёрном фоне, а контраст текста намного выше минимальных 4,5:1. Доступность ограничивает плохие решения, а не креатив.

#Дорого ли сделать сайт доступным?

Если закладывать доступность с самого начала, затраты почти не растут: по сути, это правильно сделанные HTML, CSS и дизайн. Переделка старого недоступного сайта стоит дороже — ещё одна причина подумать об этом заранее.

#Хватит ли виджета-оверлея для доступности?

Нет. Плагины-панели, которые обещают «доступность одной строкой кода», не исправят отсутствующие подписи, сломанную навигацию с клавиатуры или плохую структуру, а иногда делают только хуже. Настоящие исправления делаются в коде и дизайне.

#Сделайте сайт, которым могут пользоваться все

Доступность — это часть качества, а не дополнительная опция. Соберите проект в конструкторе — контраст, управление с клавиатуры, семантическая вёрстка и доступные формы для меня стандартная часть разработки сайта — чтобы вашим продуктом действительно могло пользоваться больше людей.