Экспертиза · UI/UX дизайн
Мы работаем с цветовыми токенами с рассчитанным коэффициентом контраста, шаблонами клавиатуры, проверенными элемент за элементом, и анимациями, которые останавливаются по системной настройке. Мы проверяем инструментом, на реальных страницах, и публикуем даже то, что не прошло проверку.
Уже построеноСистема работает на этом сайте и её можно проверить. Токен `--muted: #666b65` даёт от 4,72:1 до 5,45:1 на семи фонах сайта — мы пересчитали это по формуле яркости из WCAG, а не взяли из инструмента. Восемь цветов, записанных прямо в таблице стилей, давали 2,88–4,49:1; мы нашли их с помощью axe-core 4.10.2, запущенного на десяти живых страницах, и заменили токеном, а исправление уже находится в таблице, отдаваемой в production. Вторая проверяемая реализация: механизм остановки анимаций — 38 элементов, бесконечно анимированных на главной странице, все прикрыты кнопкой паузы, плюс глобальное правило, которое отменяет анимации при `prefers-reduced-motion: reduce`.
Большинство «систем дизайна» — это палитра и список компонентов. Наша начинается с более скучной и полезной вещи: у каждого цвета текста рассчитано отношение контраста к каждому фону, на котором он реально появляется. Не «выглядит хорошо», а число. Токен вторичного текста на этом сайте, `--muted: #666b65`, даёт от 4,72:1 до 5,45:1 на семи используемых фонах. Требуемый порог для мелкого текста — 4,5:1.
Это число не появилось из здравого смысла. Мы запустили axe-core 4.10.2 на десяти страницах собственного сайта, и единственным систематически нарушаемым правилом WCAG был контраст: от 31 до 43 узлов на страницу, из которых 31 приходился на шапку и подвал, то есть множились на все 147 адресов. Восемь цветов, заданных прямо в таблице стилей, давали от 2,88:1 до 4,49:1. Самый тяжёлый, при 10 px и 3,72:1, был именно строкой с юридическими ссылками — путём, по которому человек попадает, когда хочет воспользоваться своим правом.
Вторая часть системы — движение, рассматриваемое как функция, а не как декор. На главной странице 38 бесконечно анимированных элементов. Все они покрыты кнопкой паузы: при нажатии переходят в остановленное состояние, метка меняется, и состояние объявляется для экранных дикторов. Отдельно глобальное правило отменяет любую анимацию и переход, когда система запрашивает уменьшенное движение, останавливает плавную прокрутку и скрывает саму кнопку паузы, которая становится ненужной. Мы проверили и классическую ловушку — анимацию, которая начинается с почти нулевой непрозрачности и оставляет контент невидимым при отмене: здесь ее нет.
Остальное — дисциплина: видимый индикатор фокуса, 2 px, только при навигации с клавиатуры; перемещение стрелками в группах вкладок по рекомендованной модели; формы с ошибками, объявляемыми как alert, и подтверждениями, объявляемыми как состояние. И правило, которого мы держимся жёстко: то, что мы не смогли проверить, пишется как непроверенное. В собственном аудите есть раздел ограничений инструмента, и два найденных там дефекта всё ещё открыты — они ниже, с названиями.
Что входит
Палитра находится в блоке из 14 переменных, а вторичный текст использует один токен: `--muted: #666b65`. Отношения, пересчитанные по формуле относительной яркости из WCAG на семи фонах сайта: 5,45:1 на белом, 5,15, 5,11, 5,03, 5,02, 4,79 и 4,72. Основной текст, `--ink: #181a19`, даёт 17,49:1 на белом; зелёный акцент `#355c46` — 7,58:1. Когда цвет не дотягивает до порога, меняется токен, а не ведутся споры на совещании.
Группа вкладок на главной странице использует индекс табуляции с перемещением: только активная вкладка доступна через Tab, остальные выведены из порядка, а стрелки влево/вправо, Home и End перемещают фокус, при этом стандартное поведение клавиши отменено. Это модель из рекомендуемых практик для доступных компонентов, реализованная, а не процитированная. В базовых компонентах сайта есть 21 доступная метка, 7 состояний нажато/не нажато, 3 связи между заголовком и регионом, 2 состояния выбора, 2 региона, которые объявляют изменения, и 2 связи между командой и панелью, которую она контролирует.
На главной странице 38 бесконечно анимированных элементов, запускающихся автоматически, длительностью более пяти секунд — ровно та ситуация, которая регламентируется критерием «Пауза, остановка, скрытие». Все 38 покрыты кнопками паузы: при нажатии анимации переходят в остановленное состояние, а состояние кнопки меняется. Отдельно, при `prefers-reduced-motion: reduce` глобальное правило отменяет любую анимацию и переход, останавливает плавную прокрутку, убирает смещение при наведении мышью и скрывает кнопку паузы. На основной странице стилей семь таких блоков, плюс один в базовой странице.
Контур 2 px solid, в акцентном зелёном, с отступом 5 px, применён через `:focus-visible` — значит, появляется при навигации с клавиатуры и не при клике мышью. Проверено в браузере, элемент за элементом, в шапке и на первых командах в контенте: четыре разных элемента, один и тот же контур. Нигде в таблице стилей нет удалённого контура без замены.
В форме контактов сайта метки заданы по умолчанию на полях, ошибка помечена как alert, а подтверждение — как состояние, поэтому экранные читалки озвучивают их без того, чтобы пользователю искать. Ловушка для ботов скрыта правильно: родитель без отображения, помечен как скрытый для вспомогательных технологий и исключён из порядка табуляции. Собственный аудит подтверждает, что правила для подписей, для имён селекторов и для автозаполнения все проходят.
Мы запускаем axe-core 4.10.2 на живой странице, не в тестовой среде, на выборке из десяти страниц, которые покрывают разные шаблоны: главную страницу, каталог, страницу товара, индекс услуг, страницу услуги, матрицу решений, комбинацию из матрицы, контакты, тарифы, статью и юридический документ. Сырой результат выводится на страницу, с числом узлов, а не в виде резюме «соответствует».
Из того же аудита: при ширине 320 px команда в шапке и кнопка меню выходят за экран на 22 px, и страница прокручивается по горизонтали — арифметика даёт 362 px содержимого в контейнере 280 px. В юридических документах ссылки в тексте не отличаются от окружающего текста ничем, кроме цвета, а отношение акцента к основному тексту составляет 1,01:1, значит подчёркивание обязательно. Оба пункта открыты, с описанным исправлением. Мы публикуем их, потому что покупатель, который требует доступность, должен видеть, как выглядит реальный список дефектов.
У сайта нет тёмной темы. Блок токенов объявлен для трёх селекторов, которые получают идентичные значения, а в коде нет ни одного правила для предпочтения схемы системы. Проверено в браузере с эмулированной тёмной схемой: страница остаётся белой. Практическое следствие: все измеренные отчёты по контрасту действительны в обеих схемах. Неприятное следствие: переключатель темы — мёртвый код с точки зрения цвета. Реальная тёмная тема означает полное повторное измерение контраста, а не копирование значений.
Одна семья для заголовков и текста, с межбуквенным интервалом, настроенным по уровням — более плотным у крупных заголовков, `-0,055em` на уровнях один и два, `-0,035em` на уровне три — и насыщенностью 500 у заголовков. Абзацы используют балансировку строк, чтобы одно слово не оставалось отдельно на последней строке. Контейнер имеет максимальную ширину 1240 px с отступами 48 px, а кнопки имеют одинаковую высоту строки везде. Это правила, записанные в таблице стилей, поэтому они применяются и после того, как мы уйдем.
Как это выглядит
Первая поставка — список вещей, которые люди приходят сделать, в порядке частоты, с местом, где они останавливаются сегодня. Без него любой новый экран — эстетическое предпочтение. С ним у каждого следующего решения есть критерий.
Определяются цвета, фоны, на которых они реально появляются, и вычисленное соотношение каждой пары. Мы поставляем таблицу пар с их соотношениями. Это намного дешевле, чем в конце обнаружить, что выбранная палитра не подходит для мелкого текста.
Каждый интерактивный компонент в том же коммите получает внешний вид и поведение: что происходит при Tab, при стрелках, при Escape, что объявляется и как. Добавленный позже шаблон клавиатуры — это переписывание, а не дополнение.
Мы запускаем инструмент на выборке, которая покрывает разные шаблоны, и передаем сырую выдачу, а не резюме. Каждое замечание получает место в коде, нарушенный критерий, предлагаемое исправление и критерий проверки после исправления — например: число узлов с нарушением контраста должно снизиться до нуля на странице, которая содержит только хедер и футер.
Мы передаем токены, компоненты, документ аудита и список того, что не удалось проверить, с причиной. На этом сайте список включает активацию с клавиатуры и эмуляцию предпочтения уменьшенного движения в браузере — оба ограничения инструмента, оба написаны как есть.
Данные
Вопросы, которые задаёт всякий, у кого есть ответственный за защиту данных, — заданы здесь раньше, чем их задаст он.
Случай
Ситуация
Собственный сайт, недавно переделанный, с уже существующей системой токенов. Никто ничего не жаловался. Вопрос был не «выглядит ли хорошо?», а «что скажет инструмент, у которого нет мнения?»
Что мы построили
Я внедрил axe-core 4.10.2 в рабочую страницу и запустил его на десяти выбранных страницах с разными шаблонами. Единственным систематически нарушаемым правилом WCAG был контраст. Я сгруппировал узлы по паре текст–фон, пересчитал каждый коэффициент по формуле относительной яркости из стандарта — чтобы не зависеть от одного инструмента — и искал каждый цвет в таблице стилей. Восемь значений, записанных прямо в коде, создавали все постоянные сбои: 3,89:1 на 25 ссылках в подвале, 2,88:1 на номерах шагов, 3,72:1 на строке с юридическими ссылками и еще пять значений между 3,99 и 4,49. Правильный токен уже существовал; проблема была в том, что его обходили восемь правил.
Что получилось
Восемь значений были заменены токеном, а токен был настроен так, чтобы проходить порог на всех семи фонах сайта. Проверено дважды: в репозитории больше не появляется ни один из восьми цветов, а таблица стилей, которую сегодня обслуживает продакшн, содержит только токен. Независимый пересчет: 4,72:1 в худшем случае и 5,45:1 на белом фоне. Остальная часть аудита подтвердила то, что уже было корректно — индикатор фокуса, клавиатурный шаблон в группах вкладок, метки и состояния в форме, полное покрытие анимаций кнопками паузы.
Чего этот случай не говорит
Два замечания остались открытыми и записаны как есть: при ширине 320 px заголовок выходит за экран на 22 px, а в юридических документах ссылки в тексте отличаются только цветом, при соотношении 1,01:1 к окружающему тексту — одного цвета недостаточно, нужно подчеркивание. И ограничение метода: автоматический инструмент покрывает лишь часть критериев. Активацию с клавиатуры нельзя было проверить доступными средствами, и она помечена как непроверенная, а не пройденная.
Вопросы
Это означает числа, а не прилагательные. Вторичный текст на этом сайте использует один токен, `#666b65`, который дает от 4,72:1 до 5,45:1 на семи фонах, где он появляется, — требуемый порог для мелкого текста составляет 4,5:1. Фокус — это контур 2 px, который появляется только при навигации с клавиатуры. Анимация имеет кнопку остановки и полностью отключается при системной настройке reduced motion. Каждое из этих утверждений имеет место в коде и способ проверки.
axe-core 4.10.2, запущенный на рабочей странице, на десяти страницах, охватывающих разные шаблоны — главная страница, каталог, страница продукта, индекс и страница услуги, матрица решений и одна ее комбинация, контакты, тарифы, статья, юридический документ. Сырые результаты с количеством узлов на страницу попадают в документ. Затем мы вручную пересчитываем коэффициенты контраста по формуле из стандарта, чтобы не зависеть от одного инструмента. И явно пишем то, что не удалось проверить.
На момент аудита единственным систематически нарушаемым правилом был контраст: от 31 до 43 узлов на страницу, из них 31 из заголовка и подвала, то есть умноженные на все 147 адресов. Восемь цветов, записанных напрямую в таблицу стилей, давали от 2,88 до 4,49:1; самый плохой, при 10 px и 3,72:1, — строка с юридическими ссылками. Все восемь теперь заменены токеном, а исправление находится в таблице, обслуживаемой продакшном. Остаются открытыми два момента: при 320 px заголовок выходит за экран на 22 px, а в юридических документах ссылки в тексте отличаются лишь цветом, при соотношении 1,01:1 к окружающему тексту. Оба исправления записаны.
Потому что иначе «доступный» — слово без цены. Любой может написать, что соблюдает стандарт; немногие показывают список несоответствий с количеством узлов и строкой в таблице стилей. Если мы работаем вместе, вы получите такой же список о своем сайте — включая части, которые не делают нам чести. Узнать об этом от нас дешевле.
Нет, и я говорю это потому, что это проверяемо: блок токенов объявлен для трех селекторов, которые получают идентичные значения, а в коде нет ни одного правила для предпочтения схемы. При эмуляции темной схемы в браузере страница остается белой. Хорошая часть в том, что все измеренные коэффициенты контраста действуют в обеих схемах. Часть, которую нужно исправить, в том, что переключатель темы, который не меняет цвета, — мертвый код. Настоящая темная тема означает полный повторный замер контраста — он не переносится из светлой темы.
Могут, и поэтому у них два выхода. Первый: каждый бесконечно анимированный элемент покрыт кнопкой паузы — на главной странице я проверил, что все 38 покрыты, 0 не покрыты. Второй: при системной настройке reduced motion глобальное правило отменяет любую анимацию и переход, останавливает плавную прокрутку и даже скрывает кнопку паузы. Я проверил и классическую ловушку: если анимация начинается почти с нулевой непрозрачности и ее отменяют, контент может остаться невидимым. Здесь этого не происходит, потому что у элементов нет сниженной базовой непрозрачности.
Мы поставляем и токены, и компоненты в коде. Система дизайна, которая остается в инструменте проектирования, размывается при первом же срочном случае: кто-то пишет цвет прямо в компоненте, потому что «так здесь выглядит лучше», и через шесть месяцев у вас уже восемь параллельных цветов, которые проваливают проверку. Именно это произошло и у нас, это задокументировано выше, и поэтому токен — единственный источник истины для цвета вторичного текста.
Несколько конкретных вещей, записанных как есть в аудите. Активация с клавиатуры: используемая панель браузера не даёт активацию по умолчанию — нажатие Enter на кнопке не вызывает клик — поэтому мы не сообщаем выводы о Enter и Space. Эмуляция предпочтения reduced motion: мы не смогли включить её в браузере, поэтому правило было проверено в исходнике, а ручной тест с включённым предпочтением по-прежнему рекомендуется. И метрики воспринимаемой загрузки были недоступны в инструменте, поэтому они помечены как не измеренные, а не оценённые.
Нет, и никто честный не должен обещать это на основе автоматического инструмента. Инструмент покрывает часть критериев; остальное требует ручной проверки, а некоторые — реальных пользователей. Что мы гарантируем — это метод: заявленная выборка, заявленный инструмент и версия, опубликованный сырой результат, независимо пересчитанные соотношения, исправление с критерием проверки и явный список того, что не удалось проверить. Сертификат без этого списка ничего не значит.
14 из них — код и файлы из наших репозиториев. Мы не публикуем их название и строку: вместе, на одной странице, они слишком точно описали бы, как устроены системы, которые принадлежат не только нам. Мы разбираем их вместе с тобой, в репозитории, по запросу — проверка остаётся возможной, просто она проходит в разговоре.
Расскажите о своём процессе. Вместе определим, что стоит построить, что можно подключить и как проверим результат.