Я смотрю много дизайн-систем. Большинство из них — это не системы, это библиотеки.

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

Без второй части — это раскраска для дизайнера. Не инструмент для команды.

Где accessibility проваливается чаще всего

→ Контраст в токенах. Цветовые токены подобраны «эстетически», без проверки соотношений. Серый текст #999 на белом #FFF — провал. И его повторяют сотни раз во всех макетах.

→ Focus states нет вообще. Tab по клавиатуре — и непонятно, где курсор. Это сразу выкидывает всю клавиатурную навигацию.

→ Disabled-кнопки — серый прямоугольник без объяснения. Почему не активна? Что нужно сделать? Пользователь не знает.

→ Иконки без подписей и без aria-label. Дизайнер видит «чистый интерфейс». Скринридер видит «button, button, button».

→ Размеры шрифтов фиксированы в px. Пользователь увеличил шрифт в браузере — макет поплыл.

Что делать, если ты ведёшь систему

Накатить accessibility как фундамент, а не как «отдельный layer на потом». В каждом токене цвета хранится не только #hex, но и пара «на каком фоне можно». В каждом компоненте есть focus и disabled с объяснением. Каждая иконка имеет имя.

Это в три раза дольше для первого релиза. И в десять раз быстрее для всего, что после.

Главное

Доступность — это не «фича для слепых». Это качество системы. Если она ломается для пользователя в плохой день — она ломается для всех, она просто пока этого не показывает.

Какая твоя дизайн-система — библиотека или система? 👇