Стандарты × решения × проверка

Не стиль.
Система решений.

Тринадцать живых лабораторий объясняют, что обязательно, что рекомендовано, что подтверждено исследованиями, а что пока остаётся экспериментом.

Baseline: WCAG 2.2 AA
Mobile: от 320 CSS px
Token model: primitive → semantic → component
Runtime: 0 внешних запросов

Каждая запись: правило → live-demo → fallback → способ проверки → первичный источник.

JavaScript отключён: правила, таблицы, источники и статические варианты всех лабораторий остаются доступны. Интерактивные измерения заменены инструкциями ручной проверки.

Normative

Reflow при 320 px

Требование WCAG: без потери информации и двумерной прокрутки для обычного контента.

WCAG 1.4.10 ↗

Guidance

Hero не lazy

Вероятный LCP-ресурс виден браузеру в исходном HTML; ниже fold медиа загружаются лениво.

web.dev LCP ↗

Research

Варианты — кнопками

Размеры и варианты товара легче сравнивать, когда они открыты, а не спрятаны в select.

Baymard PDP UX ↗

Experimental

WebXR как слой

AR появляется только после capability check; 2D и inline 3D остаются полноценными fallback.

WebXR Device API ↗

Показаны все четыре уровня.

AccessibilityAA

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

LCP≤ 2,5 с

75-й перцентиль

INP≤ 200 мс

mobile / desktop отдельно

CLS≤ 0,1

вся сессия страницы

Источники: WCAG 2.2 · Web Vitals

Ширина viewport 360 px

Способ ввода Touch Keyboard

Northbound

Маршрут 08

До воды
за 12 минут.

Причал открыт до 21:40. Последнее отправление — 21:15.

Выбрать рейс

Reflow: одна колонка
Target: 44 × 44 px
Gesture fallback: кнопки доступны
Focus: видимый контур

Учебный viewport: 360 пикселей, сенсорный ввод. Без JavaScript навигация раскрыта.

Проверка: Reflow · Dragging Movements · Target Size

Hero-изображение 180 KB JavaScript страницы 70 KB Ошибочно поставить `loading="lazy"` на hero

Оценка рисканизкий

Вероятный LCP виден в HTML; JS остаётся в разумном бюджете.

Hero: eager + размеры + при необходимости `fetchpriority="high"`.
Ниже fold: `loading="lazy"`, `srcset`, `sizes`, `width`/`height`.
3D, charts и checkout: отдельный модуль после входа в сценарий.

Источники: Optimize LCP · Optimize INP · Optimize CLS

масштаб 1:1172 см

Studio 04 / льняной слой

Пальто «Север»

24 900 ₽

Размер

Доставка 8 августа · бесплатный возврат 14 дней

Выбран размер M. Доставка 8 августа.

Research: Baymard Product Page UX · Guidance: Shopify accessibility

вид 01 / фронт

Доступный baseline

Статичный 2D-вид

Товар, размеры и покупка доступны без WebGL, камеры и motion.

текстовое описание ракурса
точные размеры
обычная галерея

Активен 2D fallback. Разрешения не запрашиваются.

Источники: Shopify Product Media UX · MDN getUserMedia · W3C Privacy Principles

Бренд-диалект

practice / semantic roles

Смысл прежде значения.

Компонент не знает конкретный hex. Он знает поверхность, текст, линию и акцент.

Компонент показывает default-состояние semantic accent.

Показать цепочку alias

component.button → semantic.practice.accent → primitive.color.indigo

Формат: DTCG 2025.10. Community Group Final Report, не браузерный стандарт.

Текст Фон

Обычный текст 16 pxАа

Состояние кнопки: default.

Отношение16,2:1

AA для обычного и крупного текста: пройдено.

Пороговые значения WCAG
Проверка	Порог	Результат
Обычный текст AA	4,5:1	пройдено
Крупный текст AA	3:1	пройдено
UI / графика	3:1	пройдено

Normative: Contrast Minimum · Non-text Contrast · Use of Color

Размер текста 100% Ширина колонки Тестовая строка

Редакционная проверка / выпуск 08

Электрификация северо-восточного производственно-исследовательского комплекса продолжается без сокращений.

В 07:40 команда подтвердила маршрут. Интерфейс сохраняет слова, порядок чтения и доступ к действию даже при увеличении текста.

Открыть протокол

Масштаб 100%, колонка 58 знаков. Горизонтального переполнения нет.

Guidance: MDN clamp() · Normative: Resize Text · Text Spacing

BPtechnical editorial

Правило / пример / проверка

Система должна объяснять себя.

Практика ценнее эффекта, когда её можно воспроизвести, проверить и безопасно отключить.

Display: Literata
Body: Manrope
Voice: точный, редакционный
Shape: линия и поле

Активен диалект Practice: техническая редакция.

Immersive art direction

Кадр строится слоями, история — передачами.

Визуальная теза Deep Line: документальная подводная тишина, mint как сигнал и amber только как авария. Один persistent-мир связывает главы; свет, plate, ближний план и текст дают каждой главе самостоятельную композицию.

Кромка / 00

Один сигнал ведёт взгляд.

Mint — смысловой акцент, а не декоративная заливка всего кадра.

Композиционный стек

Пять слоёв, пять разных задач.

01 · WorldПостоянная география, камера и крупные формы.
02 · AtmosphereFog, character light и частицы создают глубину.
03 · PlateАвторский establishing- или macro-кадр внутри главы.
04 · Near planeПрозрачная вырезка закрывает передачу, не весь рассказ.
05 · Copy + postSafe zone, semantic scrim, зерно, виньетка и локализованное свечение сигнала.

Chapter handoff

Новый план возникает на стыке камеры и окклюзии.

0–20%Камера входит20–45%Вырезка растёт45–65%Кадр закрыт65–100%Blur + fade

Камера продолжает путь без hard cut. Ближний план на короткий момент полностью разделяет композиции; после передачи он уходит и открывает новую visual safe zone. В обратной прокрутке последовательность остаётся детерминированной.

Палитра и свет

Сначала roles: surface, ink, muted, signal, warning.
Холодный ambient держит мир; тёплый key появляется только у причины.
Проверяй текст на самом шумном кадре, а не на пустом swatch.

Still plate

Один кадр отвечает на один вопрос: где мы, что проверяем или что сломалось.
Локальный WebP, фиксированный aspect-ratio, lazy loading и содержательный alt.
Plate дополняет DOM-текст и 3D, но не становится единственным носителем смысла.

Alpha cutout

Чистый прозрачный край, один доминирующий силуэт, без встроенного текста.
Вырезка принадлежит конкретному стыку глав и не живёт как вечный декор.
Полная окклюзия короткая; blur/fade ограничены зоной передачи.

Сюжетное движение

Погружение ведёт взвесь, линия — импульс, разрыв — выброс и тишину.
Возврат последовательно зажигает маршрут; весь мир не качается одинаково.
Любое движение должно иметь читаемую причину и статичный эквивалент.

Текст и safe zones

Не больше двух семейств: голос истории + служебный слой.
Не клади текст на траекторию камеры, cutout и главный объект.
Длинная кириллица, 200% zoom и text spacing входят в приёмку.

Стоп-сигналы

Лишнее свечение, случайная радуга и движение без сюжетной функции.
Busy background без semantic scrim и три акцента одинаковой силы.
Копирование чужого кода, текста или арта вместо независимой системы.

Одна история в четырёх режимах
Режим	Камера	Plate / cutout	Post	Смысл
Full desktop	Непрерывный ledger	Полная передача с blur + fade	Tier-driven	DOM-текст + глава
Reduced	Дискретные главы	Статичные состояния, opacity без blur	Виньетка без движения	Тот же порядок и copy
Mobile	Отдельные endpoints	Облегчённый near plane, lazy plate	Лёгкий стек	Safe zone под узкий экран
Poster / no-JS	Авторский кадр	Композиция запечена	Нет runtime FX	Весь текст остаётся в DOM

Quality меняет видимые feature sets
Tier	DPR / density	Свет	Post-FX	Не меняется
Eco	1.0 / sparse	Статичный chapter key	Виньетка; без grain и bloom	Plate, handoff state, copy
Balance	1.28 / medium	Chapter key + restrained fill	Grain, vignette, signal glow	Сюжет и доступность
Detail	1.5 / full	Полный light ledger	Grain, vignette, localized signal glow, haze	Сюжет и доступность

Проверка: WCAG Contrast · Reflow · MDN reduced motion · live-пример Глубина / 47 ↗

СобытиеСостояние подтверждено

Можно

opacity/transform, переход состояния, короткая причинная обратная связь.

Нельзя

автоплей без остановки, бесконечный параллакс, обязательный drag без кнопки.

Fallback

dissolve, мгновенная смена, статичная иллюстрация, текстовый статус.

Full motion: короткий переход объясняет смену состояния.

Guidance: MDN prefers-reduced-motion · Normative: Pause, Stop, Hide

Матрица режимов и доказательств
Проверка	Авто	Ручная	Статус
13 уникальных anchors	DOM	deep links	не запущено
Подписи controls	DOM	screen reader	не запущено
Horizontal overflow	viewport	320 / 360 px	не запущено
Reduced motion branch	media query	вестибулярный комфорт	не запущено
Primary sources	link count	актуальность нормы	не запущено
Complete process	Axe/Lighthouse	keyboard + SR	требует ручной проверки

Самопроверка ещё не запускалась.

Рецепт полного прогона

320 и 360 px, затем 200% zoom.
Keyboard-only и видимый focus.
Reduced motion, forced colors, no-JS.
Медленная мобильная сеть, console и failed requests.
Axe serious/critical + ручная проверка полного процесса.
Полевые CWV p75 отдельно mobile/desktop.

Не стиль.
Система решений.

Не выдаём гипотезу за закон.

Reflow при 320 px

Hero не lazy

Варианты — кнопками

WebXR как слой

Качество видно до релиза.

Телефон — не уменьшенный desktop.

До воды
за 12 минут.

Бюджет раньше бандла.

Покупатель сравнивает, интерфейс не прячет.

Пальто «Север»

Пространственный слой — только после согласия.

Статичный 2D-вид

Одна роль — девять голосов.

Смысл прежде значения.

Контраст — это число и состояние.

Макет обязан пережить текст.

Электрификация северо-восточного производственно-исследовательского комплекса продолжается без сокращений.

Бренд-бук начинается не с палитры.

Система должна объяснять себя.

Кадр строится слоями, история — передачами.

Один сигнал ведёт взгляд.

Пять слоёв, пять разных задач.

Новый план возникает на стыке камеры и окклюзии.

Сначала статичная режиссура.

Один score ничего не доказывает.

Не стиль.Система решений.

Reflow при 320 px

Hero не lazy

Варианты — кнопками

WebXR как слой

До водыза 12 минут.

Пальто «Север»

Статичный 2D-вид

Смысл прежде значения.

Электрификация северо-восточного производственно-исследовательского комплекса продолжается без сокращений.

Система должна объяснять себя.

Один сигнал ведёт взгляд.

Пять слоёв, пять разных задач.

Новый план возникает на стыке камеры и окклюзии.

Не стиль.
Система решений.

До воды
за 12 минут.