На одному з проектів з аудиторією 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 проектів доступності ви отримуєте надійне рішення. Отримайте консультацію по вашому проекту — ми відповімо на будь-які запитання.