Настройка версии сайта для слабовидящих 1С-Битрикс
Версия для слабовидящих — обязательное требование для государственных и муниципальных сайтов согласно ГОСТ Р 52872-2019. Для коммерческих организаций, работающих с госзакупками или обслуживающих широкую аудиторию, это также становится частью требований. Стандарт достаточно конкретен: три размера шрифта, три цветовые схемы, возможность отключить изображения, выбор межбуквенного интервала.
Архитектура: отдельный шаблон или CSS-переключение
Два подхода. Первый — отдельный шаблон Битрикса (/bitrix/templates/accessible/) с упрощённой вёрсткой. Второй — CSS-классы на <body>, переключаемые через JavaScript с сохранением в localStorage или cookie.
Отдельный шаблон: надёжнее, но требует двойной поддержки — при изменении контента нужно обновлять оба шаблона. Логика переключения в Битриксе:
// В init.php
AddEventHandler('main', 'OnBeforeProlog', function() {
if (!empty($_COOKIE['accessible_mode'])) {
define('SITE_TEMPLATE_ID', 'accessible');
}
});
CSS-переключение: один шаблон, все настройки через CSS-переменные. Более современный подход, проще поддерживать:
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>
JavaScript и сохранение состояния
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));
// Cookie для серверного рендеринга (Битрикс может читать при загрузке)
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 на самом изображении.
Кеш Битрикса и cookie-состояние
Если Битрикс кеширует страницы на уровне PHP-компонентов, панель управления доступностью должна быть вынесена за пределы кешируемых блоков — в header.php шаблона (который не кешируется). Само содержимое страницы кешируется обычно: все изменения применяются CSS/JS на клиенте без перезапроса сервера.