Доступность и пользовательские настройки в CSS

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Тестировщику Архитектору

CSS как часть a11y

Доступность начинается с HTML (label, заголовки, alt, семантика) и поведения (клавиатура, фокус). CSS не заменяет разметку, но:

• уважает системные настройки пользователя;
• не отключает фокус и контраст;
• уменьшает вред от анимаций и движения.

---

prefers-reduced-motion

ОС и браузер позволяют включить «уменьшить движение». Медиавыражение:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Точечнее — отключать только декоративное:

.hero__banner {
  animation: slide-in 0.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .hero__banner {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

Для промо-карусели в JS можно слушать matchMedia('(prefers-reduced-motion: reduce)') и не запускать автопрокрутку.

---

prefers-contrast

Пользователь запросил повышенный контраст:

@media (prefers-contrast: more) {
  :root {
    --text: #000;
    --bg: #fff;
    --border: #000;
  }

  .btn {
    border: 2px solid currentColor;
  }
}

Значение less встречается реже — не полагайтесь только на него для «облегчённого» UI.

---

forced-colors и высокий контраст Windows

Режим принудительных цветов (Windows High Contrast и аналоги) подменяет палитру системой. Свойства background, border-color, box-shadow могут игнорироваться.

@media (forced-colors: active) {
  .btn {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .btn:focus-visible {
    outline: 2px solid Highlight;
  }
}

Используйте системные ключевые слова (Canvas, CanvasText, LinkText, Highlight) вместо фирменных hex, иначе кнопки «пропадут».

---

prefers-color-scheme

Тёмная тема через медиавыражение (дополняет переменные CSS):

:root {
  color-scheme: light dark;
  --bg: #f8fafc;
  --text: #0f172a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #e2e8f0;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

color-scheme в :root подсказывает браузеру стиль нативных scrollbar и полей формы.

Ручной переключатель темы должен перебивать только prefers-color-scheme (класс data-theme на html), а не ломать forced-colors.

---

Фокус и указатели

Не удаляйте outline без замены:

:focus {
  outline: none; /* плохо без альтернативы */
}

:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

:focus-visible — клавиатура и программный фокус, без «обводки на каждый клик мыши» в поддерживающих браузерах.

@media (pointer: coarse) {
  .nav a {
    min-block-size: 44px;
    padding-inline: 1rem;
  }
}

---

Чек-лист для вёрстки

Полные таблицы по свойствам (макет, viewport, производительность, организация кода) — в главе Практические рекомендации по CSS.

Проверка	Действие
Анимации	prefers-reduced-motion
Контраст текста	WCAG 4.5:1 для основного текста; не только opacity: 0.5 на сером
Тёмная тема	переменные + prefers-color-scheme
Высокий контраст ОС	forced-colors: active
Скрытый текст	.sr-only с clip / position, не display: none для подписей
Медиа	пауза вне экрана — наблюдатели

---

Краткий итог

Медиавыражения prefers-reduced-motion, prefers-contrast, forced-colors, prefers-color-scheme связывают дизайн с настройками пользователя. Сочетайте их с видимым :focus-visible и семантической HTML-разметкой — это минимальный набор доступного CSS без отдельной «a11y-библиотеки».

---