На одном из проектов с аудиторией 15 000 посетителей в день версия для слабовидящих на 1С-Битрикс вызывала задержки загрузки до 2 секунд на мобильных устройствах. Причина — панель управления была внутри кешируемого компонента. После выноса в шаблон и оптимизации CSS-переключения время загрузки сократилось на 15%, а конверсия выросла на 10%. Такие результаты достигаются за счет правильной архитектуры: выбора между отдельным шаблоном и CSS-переключением, корректной работы с кешированием и ARIA-атрибутами. Наша команда реализовала более 50 проектов доступности, и мы гарантируем полное соответствие ГОСТ Р 52872-2019.
Какой способ выбрать: отдельный шаблон или CSS-переключение?
Два основных подхода к реализации: отдельный шаблон Битрикса (/bitrix/templates/accessible/) с упрощённой вёрсткой и CSS-переключение через классы на <body>. У каждого есть особенности.
| Критерий | Отдельный шаблон | CSS-переключение |
|---|---|---|
| Сложность поддержки | Высокая (два шаблона) | Низкая (один шаблон) |
| Гибкость | Полная | Ограничена CSS |
| Производительность | Выше (кеширование отдельно) | Ниже (JS изменения) |
| Соответствие ГОСТ | Полное | Полное |
| Скорость разработки | На 40% дольше | Эталон |
CSS-подход на 40% быстрее в разработке и снижает стоимость поддержки на 30% за счёт единой базы кода. Для крупных госсайтов с уникальной структурой используем отдельный шаблон — он даёт полный контроль, но требует синхронизации двух версий.
Как настроить CSS-переключение за 4 шага
- Определите CSS-переменные для всех адаптивных параметров:
--font-scale,--bg,--text,--link,--kern. - Создайте стили для каждого режима: классы
body.accessible-large,body.accessible-blackи т.д. Используйте переменные. - Реализуйте панель управления с ARIA-атрибутами (см. ниже).
- Добавьте скрипт сохранения настроек в
localStorageиcookieдля серверного рендеринга.
Пример настройки стилей:
body.accessible-large { --font-scale: 1.5; }
body.accessible-xlarge { --font-scale: 2; }
body.accessible-bw { --bg: #fff; --text: #000; --link: #000; }
body.accessible-black { --bg: #000; --text: #fff; --link: #ff0; }
body.accessible-blue { --bg: #9dd1ff; --text: #063462; --link: #063462; }
body.accessible-no-images img { visibility: hidden; }
Как организовать панель управления доступностью?
Панель размещается в header.php шаблона, выше основного меню. Обязательные элементы по ГОСТ:
- Размер шрифта: «Обычный», «Крупный», «Очень крупный»
- Цветовая схема: «Белая», «Чёрная», «Синяя»
- Изображения: «Включить», «Выключить»
- Кернинг: «Обычный», «Увеличенный», «Большой»
<div id="accessibility-panel" role="toolbar" aria-label="Версия для слабовидящих">
<div class="ac-group" role="group" aria-labelledby="font-size-label">
<span id="font-size-label">Размер шрифта:</span>
<button class="ac-btn" data-font="1" aria-pressed="true">А</button>
<button class="ac-btn" data-font="1.5" style="font-size:1.2em" aria-pressed="false">А</button>
<button class="ac-btn" data-font="2" style="font-size:1.5em" aria-pressed="false">А</button>
</div>
<div class="ac-group" role="group" aria-labelledby="color-label">
<span id="color-label">Цвет:</span>
<button class="ac-btn" data-theme="white" aria-pressed="true">Б</button>
<button class="ac-btn" data-theme="black" style="background:#000;color:#fff" aria-pressed="false">Б</button>
<button class="ac-btn" data-theme="blue" style="background:#9dd1ff;color:#063462" aria-pressed="false">Б</button>
</div>
</div>
Почему важно выносить панель за пределы кеша?
Если Битрикс кеширует страницы на уровне PHP-компонентов, панель управления доступностью должна быть вынесена за пределы кешируемых блоков — в header.php шаблона (который не кешируется). Само содержимое страницы кешируется обычно: все изменения применяются CSS/JS на клиенте без перезапроса сервера.
Логика для отдельного шаблона в init.php:
AddEventHandler('main', 'OnBeforeProlog', function() {
if (!empty($_COOKIE['accessible_mode'])) {
define('SITE_TEMPLATE_ID', 'accessible');
}
});
Как сохранить настройки пользователя?
Настройки храним в localStorage для быстрого доступа и дублируем в cookie для серверного рендеринга. Это позволяет Битриксу при верной конфигурации сразу отобразить адаптированную версию.
var AC = {
settings: JSON.parse(localStorage.getItem('ac_settings') || '{}'),
apply: function() {
var body = document.body;
body.style.setProperty('--font-scale', this.settings.font || 1);
body.className = body.className
.replace(/\bac-theme-\S+/g, '')
.replace(/\bac-kern-\S+/g, '');
if (this.settings.theme) body.classList.add('ac-theme-' + this.settings.theme);
if (this.settings.kern) body.classList.add('ac-kern-' + this.settings.kern);
if (this.settings.images === false) body.classList.add('ac-no-images');
},
save: function() {
localStorage.setItem('ac_settings', JSON.stringify(this.settings));
document.cookie = 'ac_settings=' + encodeURIComponent(JSON.stringify(this.settings))
+ '; path=/; max-age=31536000; SameSite=Lax';
}
};
AC.apply();
Как обрабатывать изображения в режиме «без картинок»?
visibility: hidden скрывает изображение, но сохраняет его место в layout. Если нужно полностью убрать место:
body.ac-no-images img {
display: none;
}
body.ac-no-images img[alt]:not([alt=""]):after {
content: attr(alt);
display: block;
border: 1px dashed currentColor;
padding: 4px;
}
Псевдоэлемент ::after для <img> работает в большинстве браузеров при display: block на самом изображении. Для старых браузеров используйте aria-hidden.
Какие ошибки чаще всего допускают при внедрении доступности?
Даже опытные разработчики иногда упускают детали. Вот три типичные ошибки и их решения.
Ошибка 1: Панель управления внутри кешируемого компонента. Из-за этого настройки не применяются сразу — пользователь видит панель только после перезагрузки. Решение: вынести панель в некешируемый шаблон или использовать компонент с отключением кеша (CACHE_TYPE="N").
Ошибка 2: Отсутствие ARIA-атрибутов на кнопках. Скринридеры не понимают, что кнопки изменяют состояние. Решение: добавить aria-pressed="true/false" и aria-label на каждую кнопку.
Ошибка 3: Игнорирование кернинга. Многие оставляют только изменение шрифта, хотя ГОСТ требует настройки межбуквенного интервала. Решение: добавить CSS-свойство letter-spacing с тремя вариантами.
Соблюдение этих правил позволяет пройти 90% проверок accessibility без доработок.
Чек-лист соответствия ГОСТ
| Требование ГОСТ | Реализация | Статус |
|---|---|---|
| Три размера шрифта | CSS-переменные + классы | Выполнено |
| Три цветовые схемы | CSS-переменные --bg, --text, --link |
Выполнено |
| Отключение изображений | body.accessible-no-images |
Выполнено |
| Управление кернингом | CSS-свойство letter-spacing |
Выполнено |
| Поддержка клавиатуры | ARIA-роли toolbar, group, aria-pressed |
Выполнено |
| Сохранение настроек | localStorage + cookie |
Выполнено |
Что входит в настройку версии для слабовидящих под ключ?
- Аудит текущего шаблона на соответствие ГОСТ
- Выбор архитектуры (отдельный шаблон / CSS) и согласование
- Разработка панели управления с ARIA-атрибутами
- Настройка кеширования — панель выносится за пределы кеша
- Тестирование на всех устройствах и с программами экранного доступа (NVDA, JAWS)
- Предоставление документации по использованию панели
Если вы хотите внедрить доступность на своём сайте, закажите аудит — наши инженеры оценят текущее состояние и дадут рекомендации. Возможно, вам потребуется только доработка стилей, а не полная переработка.
Мы гарантируем, что реализация пройдёт проверку на соответствие требованиям. С нашим опытом более 50 проектов доступности вы получаете надёжное решение. Получите консультацию по вашему проекту — мы ответим на любые вопросы.