Коротко. Доступность — это возможность пользоваться сайтом клавиатурой, экранным диктором и на увеличенном масштабе. «Версия для слабовидящих» в виде кнопки-переключателя её не создаёт: панель меняет размер шрифта и цвета поверх той же разметки, а причина недоступности — в разметке. Реальный минимум закрывается семантикой, контрастом, клавиатурой и подписями к полям, и проверяется наполовину руками, а не автоматикой.
Кому доступность обязательна, а кому просто выгодна
Требования к доступности сайтов в России описаны в национальном стандарте на доступность интернет-ресурсов (серия ГОСТ Р 52872) и в отраслевых правилах: они адресованы прежде всего сайтам органов власти, государственных и муниципальных учреждений, образования, здравоохранения и организаций, оказывающих услуги населению. Точный перечень и действующая редакция меняются — сверяйте их по официальному источнику, а не по статье в блоге.
Коммерческому сайту доступность обычно не вменяется в обязанность, но остаётся выгодной по трём причинам, ни одна из которых не про благотворительность:
- Часть аудитории просто не может купить. Не только незрячие: временный гипс, яркое солнце на экране телефона, шумное метро, возрастная дальнозоркость — всё это те же барьеры, что и у постоянных ограничений.
- Доступная разметка — семантическая разметка. Заголовки по уровням, подписи к полям, осмысленные ссылки одинаково нужны и экранному диктору, и поисковому роботу.
- Доступность ловит обычные баги интерфейса. Форма, которую нельзя пройти табом, чаще всего сломана и мышью — просто это заметили позже.
«Версия для слабовидящих»: почему кнопка не делает сайт доступным
Самое частое решение в рунете — подключить панель: кнопка с изображением глаза, а за ней переключатели размера шрифта, цветовой схемы, межбуквенного интервала и отключения картинок. Выглядит как выполненное требование, но закрывает лишь малую часть задачи, и вот почему.
Панель работает поверх той же разметки. Она умеет менять внешний вид, но не может починить причину недоступности. Если у картинки нет описания, экранный диктор промолчит и при увеличенном шрифте. Если кнопка сделана из div без роли, она не станет кнопкой оттого, что стала крупнее. Если поле формы не связано с подписью, диктор так и не скажет, что в него вводить.
Тот, кому она адресована, обычно ею не пользуется. Незрячий человек приходит со своим экранным диктором, слабовидящий — со встроенным увеличением системы и собственными настройками контраста. Эти инструменты уже настроены под пользователя лучше, чем любая панель на сайте.
Оверлей может мешать. Панели, которые агрессивно переписывают страницу и навешивают свои ARIA-атрибуты, способны конфликтовать с экранным диктором и ухудшать то, что работало. Международное сообщество разработчиков ассистивных технологий относится к таким наложениям скептически ровно по этой причине.
Панель — это дополнение, а не замена. Ставить её можно, если формальное требование к сайту предполагает наличие такой версии. Но считать, что после установки виджета работа сделана, — самая дорогая ошибка в теме: базовые барьеры остаются на месте, а ощущение закрытой задачи мешает их заметить.
Проверить это утверждение легко за минуту: включите панель и попробуйте пройти главную страницу одной клавишей Tab. Если фокус исчезает, прыгает в случайном порядке или застревает в модальном окне — панель не помогла, потому что проблема была не в размере шрифта.
Принципы WCAG: POUR
Международный стандарт WCAG строится на четырёх принципах, и в них удобно раскладывать любой найденный дефект.
Воспринимаемость
- У изображений есть
alt, описывающий смысл, а не имя файла. - У видео есть субтитры, у важного аудио — расшифровка.
- Цвет не единственный носитель смысла: «поля, отмеченные красным» невидимы для дальтоника.
- Контраст текста не ниже 4,5:1, для крупного — не ниже 3:1.
Управляемость
- Вся функциональность доступна с клавиатуры, включая меню, модальные окна и слайдеры.
- Видно, где находится фокус, и порядок обхода совпадает с визуальным.
- Ничего не мигает чаще трёх раз в секунду.
- Действия по времени можно продлить или отключить.
Понятность
- Указан язык страницы, иначе диктор прочитает русский текст с английской фонетикой.
- Интерфейс ведёт себя предсказуемо: фокус в поле не переключает страницу сам по себе.
- Ошибки формы объясняют, что именно не так и как исправить.
Надёжность
- Разметка валидна, элементы не вложены друг в друга произвольно.
- ARIA используется точечно и не противоречит семантике.
Практический минимум, который закрывает большую часть барьеров
Полный WCAG велик, но подавляющее большинство реальных проблем на типовом сайте — это семь пунктов ниже.
1. Семантическая разметка вместо набора блоков
<!-- Плохо: блок с обработчиком клика -->
<div class="nav">
<div class="nav__item" data-href="/">Главная</div>
</div>
<!-- Хорошо: ссылка остаётся ссылкой, навигация — навигацией -->
<nav aria-label="Основная навигация">
<a href="/">Главная</a>
</nav>Кликабельный div не попадает в обход клавиатурой, не сообщает свою роль диктору и не открывается в новой вкладке средним кликом. Ссылка и кнопка получают всё это бесплатно.
2. Осмысленные описания изображений
<!-- Декоративное: пустой alt, чтобы диктор его пропустил -->
<img src="divider.png" alt="">
<!-- Информативное: описываем смысл, а не вид -->
<img src="chart.png" alt="Выручка выросла на 45% в третьем квартале">
<!-- Ссылка-картинка: alt описывает, куда ведёт ссылка -->
<a href="/pricing"><img src="banner.png" alt="Тарифы и цены"></a>Пустой alt — не ошибка, а инструмент: он говорит диктору «пропусти, это оформление». Ошибка — его отсутствие: тогда диктор прочитает имя файла.
3. Подписи к полям формы
<!-- Плохо: подпись только в placeholder, она исчезает при вводе -->
<input type="email" placeholder="Ваш email">
<!-- Хорошо: явная связь подписи и поля -->
<label for="email">Электронная почта</label>
<input type="email" id="email" name="email" autocomplete="email"
aria-describedby="email-hint">
<p id="email-hint">Пришлём подтверждение заказа</p>Placeholder — подсказка, а не подпись: он исчезает при вводе, имеет низкий контраст и не читается частью дикторов. Атрибут autocomplete помогает не только людям с ограничениями — он экономит всем время.
4. Контраст
Светло-серый текст на белом — самая частая находка любого аудита. Минимум 4,5:1 для обычного текста и 3:1 для крупного; это касается и текста на кнопках, и подписей под полями, и текста поверх фотографий. Отдельная проверка — состояние :disabled и плейсхолдеры: их часто делают настолько бледными, что прочитать невозможно.
5. Клавиатура и видимый фокус
Пройдите страницу табом от начала до конца. Всё интерактивное должно получать фокус, порядок должен совпадать с визуальным, а обводку фокуса нельзя убирать без замены. Правило простое: outline: none без собственного видимого стиля фокуса — это дефект, а не дизайн.
6. Заголовки по уровням
Один h1 на страницу, дальше h2 и h3 по вложенности, без перескоков ради размера шрифта. Экранные дикторы умеют переходить по заголовкам, и для незрячего это то же, что для зрячего — беглый взгляд по странице.
7. Масштаб и мобильные размеры
Страница должна оставаться работоспособной при увеличении до 200%: без горизонтальной прокрутки и без наезжающих друг на друга блоков. Кликабельные зоны на мобильном — не меньше 44 пикселей по каждой стороне, иначе в них не попасть ни при треморе, ни просто на ходу.
ARIA: сначала не использовать
Первое правило ARIA — не применять ARIA, если задачу решает нативный элемент. Правильный button уже сообщает свою роль, получает фокус и реагирует на пробел и Enter; div с role="button" придётся дооснащать вручную, и часть поведения всё равно будет отличаться.
<!-- Избыточно и хрупко -->
<div role="button" tabindex="0" aria-pressed="false">Отправить</div>
<!-- Достаточно -->
<button type="submit">Отправить</button>
<!-- ARIA уместна там, где нативного элемента нет -->
<div role="status" aria-live="polite">Заявка отправлена</div>Неверная ARIA хуже её отсутствия: атрибут переопределяет то, что браузер сообщал сам, и диктор начинает описывать элемент неправильно. Если сомневаетесь — уберите ARIA и возьмите нативный тег.
Как проверять: автоматика ловит меньше половины
Автоматические сканеры находят то, что формализуемо: отсутствующий alt, недостаточный контраст, поле без подписи, дубли идентификаторов. Всё остальное — осмысленность описаний, логичность порядка фокуса, понятность ошибок — проверяется только человеком. Поэтому проверка состоит из двух половин, и вторую пропускать нельзя.
Идеальный балл автоматической проверки — не оценка «доступно». Он означает лишь, что не найдено формализуемых нарушений. Осмысленность описаний, логичность порядка фокуса и понятность ошибок сканер не оценивает — именно там живёт большая часть реальных барьеров.
Автоматическая часть. Встроенная в браузер панель разработчика умеет прогонять аудит доступности, а расширения на движке axe дают детальный список нарушений с указанием узлов. Прогонять стоит не только главную: типовые дефекты живут в карточке товара, корзине и формах.
Ручная часть — четыре проверки, каждая по паре минут:
- Только клавиатура. Уберите руку с мыши и пройдите ключевой сценарий: меню, форма, модальное окно, отправка. Проверьте, что из модального окна можно выйти клавишей Escape и что фокус не «убегает» за него.
- Экранный диктор. В любой современной системе он встроен. Достаточно послушать первые полминуты главной: понятно ли, куда вы попали, и что за ссылки читаются.
- Масштаб 200%. Увеличьте страницу и посмотрите, не появилась ли горизонтальная прокрутка и не перекрыло ли что-то содержимое.
- Отключённые изображения. Быстрый способ увидеть, где alt отсутствует или бессмыслен.
Общее состояние страниц — коды ответа, заголовки, скорость — удобно снимать перед аудитом, чтобы не путать недоступность с обычной поломкой: для этого есть аудит сайта, проверка заголовков и проверка скорости. Медленная страница бьёт по всем, но по людям с ассистивными технологиями — сильнее: диктор читает то, что уже отрисовано.
Типичные нарушения и как их чинить
| Нарушение | Кого ломает | Как починить |
|---|---|---|
Кликабельный div вместо кнопки или ссылки | Клавиатура, экранный диктор | Взять нативный button или a |
outline: none без замены | Всех, кто ходит табом | Собственный видимый стиль фокуса |
| Подпись поля только в placeholder | Диктор, люди с когнитивными особенностями | Явный label for |
| Светло-серый текст на белом | Слабовидящих, всех на солнце | Поднять контраст до 4,5:1 |
| Заголовки выбраны по размеру шрифта | Навигацию диктором | Выстроить уровни по смыслу, размер задавать стилями |
| Модальное окно без ловушки фокуса и Escape | Клавиатуру | Удерживать фокус внутри, закрывать по Escape, возвращать фокус назад |
| Смысл передан только цветом | Дальтоников | Добавить текст, значок или подпись |
| Не указан язык страницы | Экранный диктор | Проставить атрибут языка в корневом теге |
| Автовоспроизведение видео со звуком | Почти всех | Отключить автозапуск, дать управление |
Доступность и SEO: где они совпадают
Пересечение реальное, но не стоит превращать его в обещание позиций. Совпадает то, что относится к структуре документа:
- Заголовки по уровням одинаково помогают диктору и роботу понять структуру.
- Описания изображений — это и доступность, и единственный способ для поиска понять картинку; как их писать под задачу поиска, разобрано в материале про оптимизацию изображений.
- Осмысленный текст ссылок вместо «подробнее» полезен обоим.
- Скорость и стабильность вёрстки — часть пользовательского опыта, и её метрики разобраны в гайде по Web Vitals.
А вот чего доступность не делает: она не поднимает сайт в выдаче сама по себе и не заменяет работу с содержанием. Считать её SEO-инструментом — способ разочароваться.
Частые вопросы
Достаточно ли поставить панель «версия для слабовидящих»?
Нет. Панель меняет оформление поверх той же разметки и не чинит причину: отсутствующие описания, некликабельные с клавиатуры элементы, поля без подписей. Ставить её имеет смысл как дополнение или когда наличие такой версии требуется формально, но базовую работу она не заменяет.
С чего начать, если бюджет ограничен?
С клавиатуры и контраста. Пройдите табом ключевой сценарий и поднимите контраст текста — это две самые дешёвые правки с самым заметным эффектом. Следом — подписи к полям и описания изображений.
Нужно ли делать отдельную версию сайта для незрячих?
Нет, и это худший из возможных путей. Отдельная версия почти всегда отстаёт по содержанию и умирает первой при обновлении. Доступной должна быть основная версия.
Как понять, что сайт подпадает под обязательные требования?
Ориентируйтесь на тип организации и характер услуг, а формулировки сверяйте с действующей редакцией стандарта и отраслевых правил. Если сайт относится к государственному сектору, образованию, здравоохранению или оказанию услуг населению — вопрос стоит задать юристу, а не решать по аналогии с соседним сайтом.
Автоматический сканер показал «100 из 100». Это значит, что всё хорошо?
Нет. Такой балл означает лишь, что не найдено формализуемых нарушений. Осмысленность описаний, логичность порядка фокуса и понятность сообщений об ошибках автоматика не оценивает — их проверяют руками.
Сломает ли доступность дизайн?
Нет, если заниматься ею на этапе проектирования. Дорого и заметно она обходится тогда, когда её прикручивают к готовому интерфейсу: видимый фокус, контраст и размеры зон приходится вписывать в уже утверждённый макет.
Чеклист доступности
- Ключевой сценарий проходится одной клавиатурой, фокус виден всегда.
- Контраст текста не ниже 4,5:1, включая кнопки, подсказки и неактивные состояния.
- У всех информативных изображений есть осмысленный
alt, у декоративных — пустой. - Каждое поле формы связано с подписью, а не только с placeholder.
- Ошибки формы объясняют причину и способ исправления текстом, а не только цветом.
- Заголовки идут по уровням, на странице один
h1. - Указан язык страницы.
- Модальные окна удерживают фокус, закрываются по Escape и возвращают фокус на вызвавший элемент.
- При увеличении до 200% нет горизонтальной прокрутки и перекрытий.
- Кликабельные зоны на мобильном не меньше 44 пикселей.
- Прогнан автоматический аудит и выполнены четыре ручные проверки.
- Панель «версия для слабовидящих», если она есть, считается дополнением, а не результатом.