Сайты для людей с инвалидностью по зрению, «слабовид», ГОСТ Р 52872

Сгенерировано автором
Сгенерировано автором

С вами по-прежнему амёба в ИТ с рубрикой «Просто о сложном».

Вопрос на засыпку, что вы представляете себе, когда слышите фразу «версия сайта для слабовидящих»? Скорее всего, ту самую знаменитую иконку с глазиком или очками в шапке сайта, при клике на которую страница превращается в гигантские черные буквы на ядовито-желтом… ну или белом фоне.

Казалось бы, «галочка» поставлена, требования соблюдены, совесть в наморднике. Но давайте будем честны, для полностью незрячего человека эта волшебная кнопка не значит абсолютно ничего.

С 1 марта 2026 года в России вступило в силу Постановление Правительства РФ № 102, которое закрепило новые обязательные требования по доступности официальных сайтов госорганов, местного самоуправления и подведомственных учреждений для инвалидов по зрению.

И если раньше многие отделывались формальной кнопкой контрастности, то теперь пришло время поговорить о том, что такое настоящая цифровая доступность, как скринридеры «читают» сайты и почему автоматические валидаторы кода никогда не заменят человека.

Как незрячий человек «видит» интернет

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

Скринридер буквально «идет» по дереву сайта (то есть по исходному коду страницы) сверху вниз и зачитывает синтезатором речи все, что там написано.

А теперь представьте, с чем сталкивается на практике незрячий человек:

- Кнопка без названия. Скринридер произносит: «Ссылка. Не нажато» или «Кнопка 128374». Куда она ведет? Это кнопка «Купить», «Закрыть» или «Удалить профиль»? Загадка.

- Картинки без альтернативного текста. Вместо описания, например, схемы проезда, программа зачитывает: «IMG_3256.jpg».

- Верстка сплошным блоком без заголовков. Зрячий пользователь может пробежать страницу глазами за 2 секунды. Незрячий человек перемещается по заголовкам с помощью горячих клавиш. Если вся страница сделана одинаковым блоком, ему придется прослушать 20 минут текста подряд, чтобы добраться, например, до контактов.

Что требует ГОСТ Р 52872 и при чем тут семантика

Стандарты веб-доступности требуют от нас не превращать сайт в «цирк контрастных цветов», а сделать интерфейс воспринимаемым, управляемым и понятным на уровне структуры:

- Осмысленная разметка. Используйте элементы по их прямому назначению, а не собирайте весь сайт из одинаковых универсальных блоков. Шапка должна быть обозначена как шапка, меню как блок навигации, а основной контент как главная область страницы. Если элемент отправляет форму, то он обязан быть настоящей кнопкой, а если переводит на другую страницу, то полноценной ссылкой.

- Атрибуты WAI-ARIA. Это специальные подсказки в коде, которые объясняют скринридеру состояние интерактивных элементов (например, раскрыто меню или свернуто).

- Смысловое описание (alt) у изображений. Если на картинке график отключения горячей воды, в alt нужно написать суть графика, а не просто слово «картинка».

- Навигация с клавиатуры. Попробуйте отложить мышку и пройти весь сценарий на вашем сайте (от главной страницы до отправки формы заявки), нажимая только клавишу Tab и Enter. Получилось? Если вы застряли в выпадающем окне или вас перескакивает в хаотичном порядке, то доступности нет.

Ловушка автоматических тестов или почему 100% в чекерах - это иллюзия

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

Но автомат проверяет только синтаксис. Он видит тег alt="" у картинки и считает, что все в порядке. А то, что внутри написано "баннер 1" или бессмысленный набор букв, автоматический робот понять не способен. Автомат не знает, имеет ли логику структура вашей страницы.

Именно поэтому мы в своей компании пошли глубже и приняли участие в масштабном проекте «Драйверы цифровой инклюзии» (организованном центром реабилитации инвалидов по зрению «Камерата», Нижегородской Лабораторией инклюзивных технологий при поддержке Фонда президентских грантов и ИТМО). Это потрясающе сильный и социально значимый проект, в рамках которого незрячие студенты прошли серьезную подготовку по стандартам WAI-ARIA и инструментам разработчика в ННГУ им. Лобачевского, после чего вышли на реальные стажировки в ИТ-компании и государственные структуры.

Опыт из первых уст или как наш незрячий тестировщик перевернул взгляд на верстку

Наши продукты разработки проходили ручное тестирование, которое проводил незрячий тестировщик – выпускник вышеописанного проекта. И это был неоценимый практический опыт для всей команды.

Благодаря ручному аудиту мы не просто поправили код, а выявили типичные смысловые ошибки и сформировали прикладной чек-лист для контент-менеджеров и администраторов сайтов. Потому что сделать сайт доступным технически - это лишь половина дела. Важно, чтобы в последствии никто не ломал эту доступность при ежедневной публикации новостей и документов.

Чек-лист - с чего начать делать сайт доступным уже сегодня

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

- Проверьте навигацию с клавиатуры, пройдите путь пользователя клавишей Tab. Фокус ввода всегда должен быть виден на экране.

- Подпишите все иконки и кнопки, если на кнопке нарисована только лупа или корзина, добавьте скрытый текст или атрибут.

- Дайте картинкам нормальные описания, заполните alt простыми человеческими словами.

- Соблюдайте иерархию заголовков.

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

Цифровая доступность - не про бюрократию и не про страх получить штраф. Это про уважение к людям и про то, чтобы интернет оставался открытым пространством для каждого.

А вы когда-нибудь пробовали пользоваться собственным сайтом с закрытыми глазами?

3