Режим підвищеної доступності на сайті: CSS-змінні та React

Звичайний сайт з контрастом 4.5:1 та стандартними розмірами шрифту — це крок до доступності, але не гарантія комфорту для користувачів з порушеннями зору або моторики. Режим підвищеної доступності вирішує цю проблему комплексно: збільшує шрифт, підвищує контраст до 7:1, відключає анімацію та збільшує зони клікабельності. Ми реалізували таке рішення на базі CSS-змінних та React-компонента.

Чому стандартної доступності недостатньо?

Вимоги WCAG 2.1 — це мінімум. Для тексту розміром менше 18px потрібен контраст 4.5:1, але користувачі з низьким зором часто віддають перевагу 7:1 і вище. Крім того, стандартна доступність не враховує індивідуальні вподобання: комусь потрібен лише крупний текст, комусь — висока контрастність, а хтось страждає від анімації. Наш режим дає вибір: користувач сам вирішує, які покращення увімкнути.

Як наші рішення працюють?

Основа — набір CSS-змінних, які перевизначаються при встановленні data-атрибуту на html. Це дозволяє миттєво застосовувати зміни до всього інтерфейсу. Перемикання відбувається без участі JavaScript — тільки через CSS.

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 проектів.

Процес впровадження

Строки та вартість

Реалізація займає від 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: сайт залишається доступним, але без розширених опцій.

Висновок

Режим підвищеної доступності — це не розкіш, а необхідність для сайтів, орієнтованих на всіх користувачів. Зв'яжіться з нами для консультації та оцінки вашого проекту. Ми допоможемо зробити ваш сайт доступним та комфортним для кожного. Отримайте безкоштовний аудит доступності та дізнайтеся, як покращити свій сайт.