Перейти к основному содержимому

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

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику Тестировщику Архитектору

CSS как часть a11y​

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

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

Готовый каркас страницы с блоком prefers-reduced-motion и разбором — в 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):

Код ITЗагрузка примера кода…

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-библиотеки".

Содержание