Режим підвищеної доступності на сайті: CSS-змінні та React
Звичайний сайт з контрастом 4.5:1 та стандартними розмірами шрифту — це крок до доступності, але не гарантія комфорту для користувачів з порушеннями зору або моторики. Режим підвищеної доступності вирішує цю проблему комплексно: збільшує шрифт, підвищує контраст до 7:1, відключає анімацію та збільшує зони клікабельності. Ми реалізували таке рішення на базі CSS-змінних та React-компонента.
Чому стандартної доступності недостатньо?
Вимоги WCAG 2.1 — це мінімум. Для тексту розміром менше 18px потрібен контраст 4.5:1, але користувачі з низьким зором часто віддають перевагу 7:1 і вище. Крім того, стандартна доступність не враховує індивідуальні вподобання: комусь потрібен лише крупний текст, комусь — висока контрастність, а хтось страждає від анімації. Наш режим дає вибір: користувач сам вирішує, які покращення увімкнути.
Як наші рішення працюють?
Основа — набір CSS-змінних, які перевизначаються при встановленні data-атрибуту на html. Це дозволяє миттєво застосовувати зміни до всього інтерфейсу. Перемикання відбувається без участі JavaScript — тільки через CSS.
| Опція | CSS-змінна | Вплив |
|---|---|---|
| Високий контраст | --color-text, --color-bg, --focus-outline |
Контраст тексту та фону не менше 7:1 |
| Збільшений текст | --font-size-base |
Базовий розмір шрифту збільшується на 4px |
| Зменшення анімації | --transition-duration та animation-duration: 0.01ms |
Всі анімації та переходи відключаються |
| Збільшені цілі дотику | --min-touch-target до 56px |
Кнопки та посилання стають більшими, зручнішими для моторних порушень |
React-компонент управління
Ми написали хук useAccessibilityMode, який зберігає вибрані режими в localStorage та слухає системні медіа-запити. Якщо в ОС увімкнено зменшення анімації, режим reduced-motion активується автоматично.
type AccessibilityMode = 'high-contrast' | 'large-text' | 'reduced-motion' | 'large-targets';
function useAccessibilityMode() {
const [modes, setModes] = useState<Set<AccessibilityMode>>(() => {
const stored = localStorage.getItem('a11y-modes');
return stored ? new Set(JSON.parse(stored)) : new Set();
});
// Враховуємо системні налаштування
useEffect(() => {
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mediaQuery.matches) {
setModes(prev => new Set([...prev, 'reduced-motion']));
}
}, []);
const toggle = useCallback((mode: AccessibilityMode) => {
setModes(prev => {
const next = new Set(prev);
next.has(mode) ? next.delete(mode) : next.add(mode);
localStorage.setItem('a11y-modes', JSON.stringify([...next]));
return next;
});
}, []);
// Застосувати до document.documentElement
useEffect(() => {
document.documentElement.dataset.accessibilityMode = [...modes].join(' ');
}, [modes]);
return { modes, toggle };
}
function AccessibilityPanel() {
const { modes, toggle } = useAccessibilityMode();
const [isOpen, setIsOpen] = useState(false);
const options = [
{ id: 'high-contrast' as const, label: 'Високий контраст', icon: '◑' },
{ id: 'large-text' as const, label: 'Збільшений текст', icon: 'A+' },
{ id: 'reduced-motion' as const, label: 'Менше анімації', icon: '⏸' },
{ id: 'large-targets' as const, label: 'Великі кнопки', icon: '⊞' },
];
return (
<div className="accessibility-widget">
<button
aria-expanded={isOpen}
aria-controls="a11y-panel"
onClick={() => setIsOpen(!isOpen)}
aria-label="Налаштування доступності"
>
♿
</button>
{isOpen && (
<div id="a11y-panel" role="group" aria-label="Налаштування доступності">
{options.map(opt => (
<label key={opt.id} className="a11y-option">
<input
type="checkbox"
checked={modes.has(opt.id)}
onChange={() => toggle(opt.id)}
/>
<span className="icon">{opt.icon}</span>
{opt.label}
</label>
))}
<button
onClick={() => {
localStorage.removeItem('a11y-modes');
setModes(new Set());
}}
>
Скинути налаштування
</button>
</div>
)}
</div>
);
}
Інтеграція з системними налаштуваннями (без JS)
Частина покращень застосовується автоматично, якщо користувач налаштував свою ОС. CSS медіа-запити перевизначають змінні при prefers-reduced-motion: reduce, prefers-contrast: more та prefers-color-scheme: dark. Це знижує навантаження на браузер і економить трафік — не потрібно завантажувати додатковий JS. Наприклад, на одному з проектів перемикання через CSS-змінні відбувалося за 5 мс, що в 3 рази швидше за аналогічне JS-рішення.
/* Автоматично для користувачів, які обрали зменшення анімації в ОС */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Системна висококонтрастна тема */
@media (prefers-contrast: more) {
:root {
--color-text: #000;
--color-bg: #fff;
--focus-outline: 3px solid #000;
}
}
/* Темна тема */
@media (prefers-color-scheme: dark) {
:root {
--color-text: #f0f0f0;
--color-bg: #1a1a1a;
}
}
Що входить в реалізацію режиму доступності?
Результат роботи включає:
- Набір CSS-змінних під ваш дизайн
- React-компонент з панеллю управління
- Автоматичну інтеграцію з системними налаштуваннями (prefers-*)
- Документацію з підтримки та налаштування
- Інструкцію для користувачів по використанню режиму
Ми також навчаємо вашу команду: показуємо, як додавати нові опції та тестувати доступність. Наша команда має понад 5 років досвіду в веб-доступності та реалізувала більше 30 проектів.
Процес впровадження
| Етап | Тривалість | Опис |
|---|---|---|
| Аудит поточної доступності | 1 день | Перевірка контрасту, розміру тексту, фокусів, роботи з клавіатурою |
| Проектування CSS-змінних | 1 день | Створення системи під ваш дизайн |
| Розробка компонента | 1–2 дні | Написання React-компонента або адаптація під архітектуру |
| Тестування | 1 день | Перевірка кожного режиму з screen reader (NVDA, VoiceOver) та клавіатурою |
| Деплой та документація | 0.5 дня | Передача коду та інструкції по налаштуванню |
Строки та вартість
Реалізація займає від 3 до 5 днів залежно від складності сайту. Вартість розраховується індивідуально — оцінимо ваш проект безкоштовно. Гарантуємо, що режим відповідатиме WCAG 2.1 на рівні AA. Наш підхід на CSS-змінних знижує трудозатрати на підтримку в 2 рази, що робить впровадження економічно ефективним.
Типові помилки при впровадженні
- Ігнорування системних
prefers-*запитів — користувач повинен бачити зміни автоматично. - Перевизначення фокусу тільки на CSS без видимого індикатора — обов'язково залишайте контур.
- Відсутність скидання налаштувань — дайте користувачеві можливість повернути все як було.
- Використання тільки JavaScript для перемикання — наше рішення на CSS-змінних в 2–3 рази швидше та надійніше.
Як переконатися, що режим працює у всіх браузерах?
Ми тестуємо рішення на актуальних версіях Chrome, Firefox, Safari та Edge. CSS-змінні підтримуються всіма сучасними браузерами, а медіа-запити prefers-reduced-motion та prefers-contrast — в останніх версіях. Для старих браузерів (IE11) передбачено graceful degradation: сайт залишається доступним, але без розширених опцій.
Висновок
Режим підвищеної доступності — це не розкіш, а необхідність для сайтів, орієнтованих на всіх користувачів. Зв'яжіться з нами для консультації та оцінки вашого проекту. Ми допоможемо зробити ваш сайт доступним та комфортним для кожного. Отримайте безкоштовний аудит доступності та дізнайтеся, як покращити свій сайт.