Налаштування версії сайту для слабовидячих в 1С-Bitrix
Версія для слабовидячих — обов'язкова вимога для державних та муніципальних сайтів згідно ГОСТ Р 52872-2019. Для комерційних організацій, які працюють з держзакупівлями або обслуговують широку аудиторію, це також стає частиною вимог. Стандарт досить конкретний: три розміри шрифту, три кольорові схеми, можливість відключити зображення, вибір міжлітерного інтервалу.
Архітектура: окремий шаблон або CSS-переключення
Два підходи. Перший — окремий шаблон Bitrix (/bitrix/templates/accessible/) з спрощеною версткою. Другий — CSS-класи на <body>, переключувані через JavaScript з збереженням у localStorage або cookie.
Окремий шаблон: надійніше, але потребує подвійної підтримки — при зміні контенту потрібно оновлювати обидва шаблони. Логіка переключення в Bitrix:
// В 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 для серверного рендерингу (Bitrix може читати при завантаженні)
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 на самому зображенні.
Кеш Bitrix та cookie-стан
Якщо Bitrix кешує сторінки на рівні PHP-компонентів, панель управління доступністю повинна бути винесена за межі кешованих блоків — в header.php шаблона (який не кешується). Сам контент сторінки кешується звичайно: всі зміни застосовуються CSS/JS на клієнті без переглядання сервера.