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