Доступность сайта

Я хочу, чтобы этим сайтом мог пользоваться любой человек: с плохим зрением, с нарушением цветовосприятия, с мигренью от яркого экрана, с программой экранного доступа или только с клавиатурой. Ориентир — международный стандарт WCAG 2.2, уровень AA. На нём же основан российский ГОСТ Р 52872-2019.

Честный статус: сайт частично соответствует WCAG 2.2 AA. Что сделано и что нет — ниже.

Панель «Аа»

Панель открывается пунктом «Доступность» в меню шапки, на телефоне — кнопкой «Аа» в шапке. В ней:

• Размер текста — 100, 125, 150 или 200 %. Растёт только текст, вёрстка не разваливается и не уходит вбок.
• Цвета — три контрастные схемы: чёрным по белому, белым по чёрному и тёмно-коричневым по бежевому. Бежевая мягче для глаз, если от белого фона устаёте. В схемах нет фоновой текстуры и цветных плашек, а ссылки в тексте всегда подчёркнуты.
• Интервалы — шире расстояние между строками, буквами и словами. Помогает, если строчки «слипаются», например при дислексии.
• Анимация — выключает всё движение на сайте. Если в системе уже включено «уменьшить движение», сайт его учитывает и без панели.

Настройки запоминаются в вашем браузере и действуют на всех страницах. На сервер они не отправляются.

Что сделано в самом сайте

Панель — только надстройка. Основная работа сделана в коде сайта:

• Масштаб. Размеры шрифтов заданы в относительных единицах. Работают и обычный зум браузера, и настройка размера шрифта в браузере.
• Контраст. Текст отличается от фона минимум в 4,5 раза — это норма WCAG для обычного текста. Проверял в обеих темах, светлой и тёмной.
• Цвет — не единственный сигнал. Где цвет что-то значит, рядом есть текст: например, у счётчика свободных мест есть подпись «свободно 2 места».
• Клавиатура. Всё, что кликается, доступно с клавиатуры, а элемент в фокусе видно по рамке. Первой по Tab идёт ссылка, которая пропускает меню и ведёт сразу к содержимому. В окне заявки фокус не уходит за его пределы, а Esc закрывает окно.
• Структура. Заголовки идут по порядку, у полей форм есть подписи, ссылки в тексте подчёркнуты.
• Без «виджетов доступности». Я не ставлю готовые оверлеи вроде accessiBe или UserWay. Они часто мешают программам экранного доступа, а Федеральная торговая комиссия США в 2025 году оштрафовала accessiBe за обещания «полного соответствия» WCAG.

Как проверял

8 ноября 2026 года я проверил главную, базу знаний, статьи и инструменты, на широком экране и на ширине телефона:

• автоматически — axe-core по правилам WCAG 2.0–2.2 A и AA;
• контраст на текстурном фоне — своим скриптом, потому что axe его там не считает;
• вручную — прошёл страницы клавиатурой.

Что ещё не готово

• Программы экранного доступа. Вручную с NVDA и VoiceOver сайт ещё не проверял.
• Мета-теги онлайн. Инструмент работает на другом движке. Его я не проверял, и панели «Аа» на нём нет.
• Мелкие подписи. Часть служебных подписей набрана мелко, 11–12 пикселей. Если мешает — увеличьте текст в панели «Аа».
• Старые статьи из архива переносил со старого сайта. У части картинок может не быть описаний.
• Видео в статьях без субтитров.

Если что-то мешает

Напишите мне, что не получилось и на какой странице. Отвечаю лично.

• Телеграм — @haisman
• Почта — [email protected]