Системные настройки читателя

Человек может настроить уменьшение движения или принудительную цветовую схему на своём устройстве. Эти настройки помогают читать интерфейс в подходящих условиях. Сайт должен учитывать их смысл, сохраняя информацию и управление, а не настойчиво восстанавливать фирменный вид поверх пользовательского выбора.

В этом уроке вы добавите ограниченные уточнения к a11y-lab после двенадцатой главы. Основной стенд уже не требует сложной анимации, а фокус показан обычной рамкой. Мы рассмотрим необязательную плавную прокрутку и сохранение границ в принудительных цветах; другие углублённые прототипы подключать не нужно.

Уменьшение движения как предпочтение

Плавное перемещение к разделу может помогать видеть направление, но большое движение также способно мешать некоторым читателям. prefers-reduced-motion сообщает предпочтение уменьшить необязательное движение. Оно не означает, что у каждого пользователя выключен любой эффект или что браузер сам удалит вашу JavaScript-анимацию. Механизм MDN.

У нашего стенда якорные ссылки работают без анимации. Сначала сохраним этот обычный вариант, а плавность разрешим только при отсутствии соответствующего предпочтения. Такой подход делает движение улучшением, а не условием доступа к содержимому. При неподдерживаемом условии основная ссылка остаётся работоспособной.

Добавьте в конец lesson.css следующий полный фрагмент:

html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

Ожидается различие формы перемещения, а не результата ссылки: оба варианта приводят к существующим descendants и filter. Поле компенсации закреплённого хедера из четвёртого урока сохраняется. Мы не перемещаем фокус заново после каждого кадра и не изменяем название раздела ради видимого эффекта.

Если в будущем появится анимированный диаграммный переход, нужно отдельно назвать, какая часть движения существенна. Замена долгого пролёта мгновенным состоянием может сохранить смысл. Но автоматическое отключение всего, включая необходимую обратную связь, тоже не является правильной универсальной стратегией. Текстовые состояния должны оставаться понятными.

Необязательный эффект и логика действия

Анимация не должна быть единственным условием завершения операции. Например, если скрипт показывает сообщение только по событию окончания перехода, удаление анимации может сломать обратную связь. Тогда проблема находится в зависимости логики, а не в CSS-предпочтении.

В форме нашего стенда результат задаётся обработчиком проверки адреса, а не визуальным эффектом. Поэтому уменьшение движения не требует изменения текста «Ничего не отправлено». Это полезный пример разделения: действие и его объяснение существуют независимо от оформления перехода.

Не назначайте глобально почти нулевую длительность всем анимациям без чтения компонентов. Такой приём часто выглядит удобным, но может оставить скриптовые зависимости и резкие повторные эффекты. Лучше перечислить действительно используемое необязательное движение и изменить его по назначению.

Кроме того, отсутствие предпочтения не является обязательным согласием на постоянное движение. Статья может оставаться полностью спокойной и в этом состоянии. Значение no-preference даёт возможность выбранного улучшения, но не требует добавлять декоративную анимацию в каждый компонент.

Принудительные цвета меняют правила

forced-colors определяет состояние, в котором браузер использует ограниченную пользовательскую палитру для ряда цветов. Тени могут исчезать, а цвет текста, фона и границ — переопределяться. Системные цвета зависят в том числе от встроенной семантики элемента. Описание MDN.

Если кнопка отделена от фона только тенью, её видимая граница может исчезнуть. Обычная рамка и текстовое название устойчивее. В нашем стенде фокус уже основан на outline, а ошибка имеет слова и связь с полем. Эти решения сохраняют смысл независимо от фирменного фиолетового.

Добавьте следующий самостоятельный фрагмент к тому же CSS:

@media (forced-colors: active) {
  :root { --focus-color: Highlight; }
  #course-toggle, #feedback-form button {
    border: 2px solid ButtonText;
    color: ButtonText; background: ButtonFace;
  }
  #feedback-email[aria-invalid="true"] { border: 2px solid CanvasText; }
  #feedback-email-error { color: CanvasText; }
  .method-table th, .method-table td { border-color: CanvasText; }
  .lesson-note { border: 1px solid CanvasText; }
}

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

Обратите внимание: значение --focus-color влияет на уже заданные рамки фокуса. Это точечная интеграция с основой четвёртого урока. Не нужно добавлять новую независимую систему, которая покажет одновременно несколько разных индикаторов вокруг одного поля.

Изображения и границы вмешательства

Схема Employees в стенде является отдельным SVG-ресурсом. Её реальное отображение в выбранном режиме нужно будет увидеть отдельно. Нельзя предполагать, что внешняя картинка автоматически примет те же системные цвета, что текст страницы. Именно поэтому отношения узлов и значения уже доступны в обычной подписи.

Не назначайте всей странице forced-color-adjust: none, чтобы вернуть бренд. Такое отключение может лишить человека необходимых условий чтения. Иногда определённый содержательный объект требует сохранения цвета, но это узкая задача с альтернативой и собственным основанием, а не защита каждого декоративного фона.

Пользовательская палитра и светлая тема сайта также различаются. Обычный переключатель темы заменяет ваши значения, а принудительный режим применяет свои правила. Поэтому удачный вид в светлой теме не доказывает работу в принудительных цветах. У этих состояний разные условия будущего наблюдения.

У заметки «Обратите внимание» смысл находится в тексте, а не только в цвете поверхности. Если фон меняется, сообщение остаётся понятным. То же относится к ошибке формы: её слова объясняют, что нужно исправить. Без этого простое сохранение красного цвета не обеспечило бы содержательность.

Рассмотрим таблицу Element, Elements и Descendants. Её строки различаются подписями, а область сравнения задана заголовками, поэтому исчезновение мягкого фонового оттенка не меняет данные. Граница помогает отделить ячейки, но значение не передаётся исключительно цветной полосой. Если позже автор выделит правильный вариант только зелёной заливкой, системный режим обнаружит содержательную зависимость. Исправлением станет явная пометка в тексте или отдельный столбец результата, а не попытка навсегда закрепить зелёный фон.

Наблюдения по отдельным состояниям

Подготовьте маршруты якорного перехода, раскрытия меню, ошибки формы и сравнения таблицы. При уменьшении движения ожидайте доступности тех же действий без обязательного большого перемещения. При принудительных цветах ищите различимые границы, названия и индикатор положения.

Не объединяйте разные настройки в одно расплывчатое «режим доступности». Запишите, какая настройка включена, в какой среде и что произошло. Если граница исчезла только у одной кнопки, это конкретный компонент для исправления, а не основание полностью отключить пользовательскую палитру.

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