Реализация режима повышенной доступности на сайте

Обычный сайт с контрастом 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.

/* Автоматически для пользователей, выбравших уменьшение анимации в ОС */
@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: сайт остаётся доступным, но без расширенных опций.

Заключение

Режим повышенной доступности — это не роскошь, а необходимость для сайтов, ориентированных на всех пользователей. Свяжитесь с нами для консультации и оценки вашего проекта. Мы поможем сделать ваш сайт доступным и комфортным для каждого. Закажите аудит доступности и узнайте, как улучшить свой сайт.