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

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

Висновок

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