Експертиза · Design UI/UX
Ми працюємо з кольоровими токенами з обчисленим коефіцієнтом контрасту, шаблонами клавіатури, перевіреними елемент за елементом, і анімаціями, що зупиняються відповідно до налаштування системи. Ми перевіряємо інструментом, на реальних сторінках, і публікуємо також те, що не пройшло.
Вже збудованоСистема працює на цьому сайті й її можна перевірити. Токен `--muted: #666b65` дає від 4,72:1 до 5,45:1 на семи фонах сайту — перераховано нами за формулою яскравості WCAG, а не взято з інструмента. Вісім кольорів, записаних прямо в таблиці стилів, давали 2,88–4,49:1; ми знайшли їх за допомогою axe-core 4.10.2, запущеного на десяти live-сторінках, і замінили токеном, а виправлення вже є в таблиці, що віддається у 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, застосований лише під час навігації клавіатурою; пересування стрілками в групах tabsів, за рекомендованою моделлю; форми з помилками, оголошеними як alert, і підтвердженнями, оголошеними як state. І правило, якого ми тримаємося жорстко: те, що ми не змогли перевірити, пишеться як неперевірене. У власному аудиті є розділ про обмеження інструмента, і дві знайдені там вади все ще відкриті — вони нижче, з назвами.
Що входить
Палітра міститься в блоці з 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. Коли колір не досягає порога, змінюють токен, а не сперечаються на нараді.
Група tabsів на головній сторінці використовує рухомий tab-index: лише активний tab доступний через Tab, інші виведені з порядку, а стрілки ліворуч/праворуч, Home і End переміщують фокус із скасуванням стандартної поведінки клавіші. Це модель із рекомендованих практик для доступних компонентів, реалізована, а не процитована. У базових компонентах сайту є 21 доступна мітка, 7 станів натиснуто/не натиснуто, 3 зв’язки між заголовком і регіоном, 2 стани вибору, 2 регіони, що оголошують зміни, і 2 зв’язки між командою та панеллю, якою вона керує.
На головній сторінці є 38 анімованих елементів, що нескінченно відтворюються, запускаються автоматично та тривають понад п’ять секунд — саме та ситуація, яку регулює критерій «Пауза, зупинка, приховування». Усі 38 закриті кнопками паузи: під час натискання анімації переходять у зупинений стан, а стан кнопки змінюється. Окремо, при `prefers-reduced-motion: reduce` глобальне правило скасовує будь-яку анімацію та перехід, зупиняє плавне прокручування, прибирає зміщення при наведенні миші та приховує кнопку паузи. У головному аркуші є сім таких блоків, плюс один у базовому аркуші.
Контур 2 px solid, у акцентному зеленому, з відступом 5 px, застосований через `:focus-visible` — отже, він з’являється під час навігації з клавіатури і не з’являється при кліку миші. Перевірено в браузері, елемент за елементом, у шапці та на перших командах із вмісту: чотири різні елементи, той самий контур. Ніде в таблиці стилів немає видаленого контуру без замінника.
У формі контакту сайту мітки є вбудованими для полів, помилка позначена як сповіщення, а підтвердження — як стан, тож читачі екрана оголошують їх без того, щоб користувач шукав. Пастка для ботів схована правильно: батьківський елемент без відображення, позначений як прихований для асистивних технологій і вилучений із порядку табуляції. Власний аудит підтверджує, що правила маркування, іменування для селекторів і автозаповнення проходять усі.
Ми запускаємо 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 у live-сторінку і запустив його на десяти вибраних сторінках для різних шаблонів. Єдиним правилом WCAG, яке систематично порушувалося, був контраст. Я згрупував вузли за парою текст–фон, перерахував кожне співвідношення за формулою відносної яскравості зі стандарту — щоб не залежати від одного інструмента — і знайшов кожен колір у таблиці стилів. Вісім значень, записаних безпосередньо в коді, спричиняли всі постійні помилки: 3,89:1 на 25 посиланнях у підвалі, 2,88:1 на номерах кроків, 3,72:1 на рядку з юридичними посиланнями, і ще п’ять між 3,99 та 4,49. Потрібний токен уже існував; проблема була в тому, що його обходили вісім правил.
Що вийшло
Вісім значень замінили на токен, а токен налаштували так, щоб він проходив поріг на всіх семи фонах сайту. Перевірено двічі: у репозиторії більше не з’являється жоден із восьми кольорів, а таблиця стилів, яку сьогодні віддає production, містить лише токен. Перераховано незалежно: 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, який з’являється лише під час навігації клавіатурою. Рух має кнопку зупинки й повністю скасовується за системної переваги зменшеного руху. Кожне з цих тверджень має місце в коді та спосіб перевірки.
axe-core 4.10.2, запущений на live-сторінці, на десяти сторінках, що покривають різні шаблони — головна сторінка, каталог, сторінка продукту, індекс і сторінка сервісу, матриця рішень і її комбінація, контакт, тарифи, стаття, юридичний документ. Сирий результат, із кількістю вузлів на сторінку, входить у документ. Понад це ми вручну перераховуємо співвідношення контрасту за формулою зі стандарту, щоб не залежати від одного інструмента. І явно пишемо, що саме не вдалося перевірити.
На момент аудиту єдиним систематично порушеним правилом був контраст: від 31 до 43 вузлів на сторінку, з яких 31 — із шапки та підвалу, тобто помножені на всі 147 адрес. Вісім кольорів, записаних безпосередньо в таблиці стилів, давали від 2,88 до 4,49:1; найгірший, для 10 px і 3,72:1, був рядок із юридичними посиланнями. Усі вісім тепер замінені на токен, а виправлення є в таблиці, яку віддає production. Залишаються відкритими два питання: на 320 px шапка виходить за екран на 22 px, а в юридичних документах посилання в тексті вирізняються лише кольором, із співвідношенням 1,01:1 щодо навколишнього тексту. Обидва мають записане виправлення.
Тому що інакше «доступний» — це слово без вартості. Будь-хто може написати, що дотримується стандарту; небагато хто показує список невідповідностей із кількістю вузлів і рядком у таблиці стилів. Якщо ми працюватимемо разом, ви отримаєте такий самий список щодо вашого сайту — включно з тим, що нам не додає балів. Краще дізнатися це від нас.
Ні, і я кажу це тому, що це перевіряється: блок токенів оголошено для трьох селекторів, які отримують однакові значення, а в коді немає жодного правила для переваги схеми. Якщо емулювати темну схему в браузері, сторінка лишається білою. Добре те, що всі виміряні співвідношення контрасту дійсні в обох схемах. Те, що треба виправити, — це перемикач теми, який не змінює кольори, тобто мертвий код. Справжня темна тема означає повне повторне вимірювання контрасту — воно не переноситься зі світлої.
Можуть, і тому мають два виходи. Перший: кожен елемент, що анімується без кінця, покрито кнопкою паузи — на головній сторінці ми перевірили, що всі 38 покриті, нуль непокритих. Другий: за системної переваги зменшеного руху глобальне правило скасовує будь-які анімації та переходи, зупиняє плавне прокручування і навіть ховає кнопку паузи. Ми перевірили й класичну пастку: якщо анімація починається майже з нульової непрозорості й скасовується, вміст може залишитися невидимим. Тут цього не стається, бо елементи не мають зниженої базової непрозорості.
Ми постачаємо токени та компоненти в коді. Система дизайну, яка лишається в інструменті проєктування, розмивається при першій терміновій зміні: хтось пише колір прямо в компоненті, бо «так тут виглядає краще», і через шість місяців у вас є вісім паралельних кольорів, що не проходять перевірку. Саме це сталося і в нас, це задокументовано вище, і тому токен — єдине джерело істини для кольору допоміжного тексту.
Кілька конкретних речей, записаних саме так в аудиті. Активація з клавіатури: використана браузерна панель не дає активації за замовчуванням — натискання Enter на кнопці не генерує клік — тож ми не повідомляємо висновки щодо Enter і Space. Емуляція переваги зменшеного руху: ми не змогли увімкнути її в браузері, тож правило було перевірене в джерелі, а ручний тест із увімкненою перевагою лишається рекомендованим. І метрики відчутного завантаження не були доступні в інструменті, тож вони позначені як непоміряні, а не оцінені.
Ні, і ніхто чесний не повинен цього робити на основі автоматичного інструмента. Один інструмент покриває частину критеріїв; решта потребує ручної перевірки, а деякі — реальних користувачів. Те, що ми гарантуємо, — це метод: задекларована вибірка, задекларований інструмент і версія, опублікований сирий результат, незалежно перераховані співвідношення, виправлення з критерієм перевірки та явний список того, що не вдалося перевірити. Сертифікат без цього списку нічого не каже.
14 з них — це код і файли з наших репозиторіїв. Ми не публікуємо їхні назви чи номери рядків: разом, на одній сторінці, це надто точно описало б, як побудовані системи, які належать не лише нам. Ми проходимо їх разом із вами, у репозиторії, за запитом — перевірка залишається можливою, просто вона відбувається в розмові.
Розкажіть про свій процес. Разом визначимо, що варто збудувати, що можна підключити і як перевіримо результат.