Как сделать сайт доступным в 2026: версия для слабовидящих и WCAG

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

Что такое доступность сайта и кому она нужна

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

• Люди со слабым зрением. Увеличивают шрифт браузером, включают контрастную тему. Жёсткая вёрстка в пикселях при этом рассыпается: текст наезжает, кнопки уезжают за экран.
• Незрячие. Слушают страницу читалкой: NVDA на Windows, VoiceOver на macOS и iPhone, TalkBack на Android. Она озвучивает заголовки, ссылки, подписи полей и alt. Чего нет в разметке, того для неё не существует.
• Люди с нарушением моторики. Работают только клавишами Tab и Enter. Если фокус не виден, сайт для них закрыт.
• Люди с нарушением цветовосприятия. Не увидят ошибку под полем, если она отличается от обычного текста только цветом.
• Все остальные ситуативно. Солнце бьёт в экран, сломалась мышь, шумный вагон и звук выключен.

Насколько это частая проблема, видно по отчёту WebAIM Million: в феврале 2026 года проверка миллиона главных страниц нашла нарушения WCAG 2 на 95,9% из них. Низкий контраст был на 83,9% страниц, картинки без alt на 53,1%, поля без подписей на 51%.

Что требует закон в России в 2026 году

Базовый документ это ГОСТ Р 52872-2019 «Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме. Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности». Он введён с 1 апреля 2020 года взамен версии 2012 года и построен на международном своде правил WCAG 2.1. Сам стандарт применяется добровольно: обязательным его делают отсылки в отраслевых требованиях и договорах.

Госорганы и подведомственные организации. С 1 марта 2026 года действует постановление Правительства от 07.02.2026 № 102 о доступности информации для инвалидов по зрению на официальных сайтах госорганов, органов местного самоуправления и подведомственных им организаций. Среди требований: масштабирование текста до 200% без потери функциональности, совместимость с программами экранного доступа, описательные заголовки страниц, читаемый шрифт с достаточной контрастностью.

Школы, детские сады, колледжи и вузы. Структуру официального сайта задаёт приказ Рособрнадзора от 04.08.2023 № 1493. Требование иметь отдельную «версию для слабовидящих» из него исключено приказом от 03.07.2025 № 1353, основная часть изменений применяется с 1 марта 2026 года. Это не отмена доступности, а смена подхода: доступной должна быть сама страница, а не её урезанная копия по кнопке.

Остальным сайтам никто ничего не предписывает, но выгода прямая: заказ, который человек не смог оформить, это потерянные деньги. Плюс осмысленные заголовки, alt и понятные тексты ссылок помогают и поисковым роботам разобрать страницу.

По теме: Как сделать сайт на платформе в 2026: какую выбрать и с чего начать

Семь приёмов, которые дают основной эффект

• Контраст текста. По уровню AA обычный текст отличается от фона минимум как 4,5:1, крупный (от 18pt или 14pt жирным) и элементы интерфейса минимум 3:1. Уровень AAA это 7:1 и 4,5:1. Считать вручную не надо, есть WebAIM Contrast Checker.
• Размер и масштабирование. Основной текст от 16px, размеры в относительных единицах (rem), страница переживает увеличение до 200%.
• Альтернативный текст. Атрибут alt описывает смысл картинки, декоративным ставится пустой alt="", чтобы читалка их пропустила.
• Работа с клавиатуры. По странице надо пройти клавишей Tab в логичном порядке, и должно быть видно, где фокус. Частая ошибка это outline: none в стилях ради красоты.
• Подписи к полям формы. Каждому полю нужен label со ссылкой на id. Серый текст внутри поля (placeholder) подписью не считается: он исчезает при вводе. Как устроена форма целиком, разбирали в материале про форму заявки.
• Понятные ссылки и кнопки. «Подробнее» и «Нажмите здесь» в списке ссылок читалки превращаются в кашу. Пишите, куда ведёт ссылка. Кнопке из одной иконки добавьте aria-label.
• Структура и язык. Один h1 на страницу, дальше h2 и h3 по порядку. Атрибут lang="ru" у тега html, иначе синтезатор прочитает русский текст с английским произношением. К видео субтитры или расшифровка.

Как это выглядит в разметке:

<html lang="ru">

<!-- смысловая картинка -->
<img src="tort.jpg" alt="Свадебный торт в три яруса с живыми цветами">

<!-- декоративная: читалка её пропустит -->
<img src="uzor.svg" alt="">

<label for="phone">Телефон для связи</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">

<button type="submit">Отправить заявку</button>
<button type="button" aria-label="Закрыть окно">×</button>

Как проверить свой сайт за 15 минут

1. Откройте сайт в Chrome, нажмите F12, вкладка Lighthouse, категория Accessibility. Отчёт даст оценку и список нарушений с пояснениями. То же без установки делает PageSpeed Insights.
2. Поставьте расширение WAVE от WebAIM или axe DevTools от Deque: они подсвечивают ошибки прямо на странице.
3. Прогоните цвета через WebAIM Contrast Checker: текст, ссылки, буквы на кнопке, серые подписи под полями. Серый на светло-сером проваливается почти всегда.
4. Уберите руку с мыши и пройдите страницу клавишей Tab: меню, ссылки, поля, кнопка отправки. Из модального окна должен быть выход клавишей Esc.
5. Нажмите Ctrl и + до 200%, потом сузьте окно до ширины телефона, подробнее в разборе того, как сделать мобильную версию сайта.
6. Включите читалку и послушайте главную: на Windows бесплатная NVDA, на Mac VoiceOver сочетанием Cmd и F5. Двух минут хватит, чтобы услышать «изображение» вместо осмысленных слов.

Важная поправка: сканеры находят примерно треть типовых проблем. Машина видит отсутствие alt, но не видит, что в alt написана ерунда. Оценка 100 в Lighthouse не означает, что сайтом можно пользоваться.

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

По теме: Как сделать сайт компании в 2026: структура, реквизиты, 152-ФЗ

Почему готовый виджет не всегда решает проблему

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

Что он умеет: увеличить шрифт и поменять цвета. Чего не умеет: придумать alt там, где его нет, связать поля с подписями, починить порядок заголовков и невидимый фокус, расставить субтитры. Он рисует поверх сайта, а проблемы лежат в разметке под ним. Хуже того, наложения включают собственный «режим для читалки», хотя у незрячего своя программа уже запущена.

Как это оценивают сами пользователи, показал опрос WebAIM: среди респондентов с инвалидностью 72% назвали такие наложения «совсем не» или «не очень» эффективными. Вывод не «виджет зло», а «виджет не вместо»: пусть стоит, но контраст, alt и клавиатуру чините в основной вёрстке.

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

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

Проверь файл index.html и style.css на доступность по WCAG 2.1 уровня AA.
Сделай по пунктам:
1. Проставь осмысленный alt всем картинкам, декоративным поставь alt="".
2. Свяжи каждое поле формы с label через for и id, placeholder оставь подсказкой.
3. Подними контраст текста к фону минимум до 4.5:1, палитру оставь в той же гамме.
4. Верни видимую рамку фокуса ссылкам и кнопкам, убери outline: none.
5. Приведи в порядок заголовки: один h1, дальше h2 и h3 без пропусков.
6. Добавь lang="ru" и осмысленный title страницы.
Тексты и структуру блоков не меняй. В конце покажи список изменений.

После правок проверьте руками: ИИ уверенно пишет alt вида «изображение товара» и легко перекрашивает аккуратную палитру в чёрное на белом ради контраста.

1. Прочитайте все alt подряд: каждый описывает, что на картинке, коротко и по делу.
2. Сравните страницу до и после: цвета не должны уехать в неузнаваемое.
3. Пройдите Tab по форме: фокус виден, поля подписаны, заявка отправляется без мыши.
4. Проверьте вёрстку на узком экране, там правки ломаются чаще всего.
5. Прогоните Lighthouse ещё раз и сравните оценку с прежней.

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

Обязательна ли версия для слабовидящих в 2026 году?

Для сайтов образовательных организаций это требование исключено приказом Рособрнадзора от 3 июля 2025 года, основная часть изменений применяется с 1 марта 2026 года. Обязанность обеспечивать доступность информации осталась, просто закрывается она доступностью самой страницы. У госорганов с той же даты действует постановление Правительства о доступности сайтов. Коммерческому сайту отдельная версия не требовалась никогда.

Какой контраст считать достаточным?

Ориентир уровня AA: 4,5:1 для обычного текста и 3:1 для крупного текста и элементов интерфейса. Уровень AAA строже: 7:1 и 4,5:1. Проверяется бесплатно в WebAIM Contrast Checker или во вкладке стилей браузера, где рядом с цветом показан коэффициент.

Сколько стоит сделать сайт доступным?

Инструменты бесплатны: Lighthouse встроен в Chrome, WAVE и axe DevTools это бесплатные расширения, NVDA бесплатная программа. Платите временем или работой исполнителя. На небольшом сайте базовый набор занимает несколько часов, и большую часть можно поручить ИИ, оставив себе проверку.

Нужно ли это сайту-визитке из трёх экранов?

Нужен минимум: контраст, alt, подписи у полей формы и видимый фокус. Это час работы, и он снимает большую часть проблем. Полный аудит по стандарту нужен там, где через сайт идут деньги или обязательная информация.