ПЛАН: улучшение доступности дизайна по стандарту WCAG

Цель

Привести типографику, цвета и компоновку сайта в полное соответствие со стандартом WCAG 2.1 уровня AA (и где возможно — AAA). Изменения затронут все темы оформления: светлую, тёмную, высококонтрастную и сепию.

Этап 1 — Типографика: единицы ch и масштабирование

• Перейти на единицы ch / rem / em для всех размеров шрифта — отказаться от px в типографике.
• Максимальная ширина строки: **max-width: 75ch** (WCAG 1.4.8 — не более 80 символов в строке).
• Межстрочный интервал: минимум **1.5** (WCAG 1.4.12).
• Межбуквенный интервал: не менее **0.12em**.
• Отступ между абзацами: не менее **2em**.
• Проверить поведение текста при масштабировании браузера до 200% — текст не должен обрезаться и перекрываться.

Этап 2 — Контраст цветов по всем темам

Для каждой темы (light, dark, high-contrast, sepia) проверить коэффициент контраста:

Инструменты проверки: WebAIM Contrast Checker(внешняя ссылка, откроется в новом окне), Chrome DevTools → Accessibility.

Этап 3 — Кнопки: контраст и читаемость

• Проверить и при необходимости скорректировать CSS-переменные --ui-primary, --ui-primary-contrast для каждой темы.
• Все состояния кнопки (default, hover, focus, disabled, active) должны иметь контраст ≥ 4.5:1.
• Состояние disabled — не менее 3:1 (WCAG 1.4.3, примечание).
• Outline фокуса: focus:ring-2 focus:ring-[var(--ui-primary)] с отступом focus:ring-offset-2.
• Минимальный размер интерактивного элемента: 44×44px (WCAG 2.5.5).

Этап 4 — Фиксация обрезания текста

• Убрать все случаи overflow: hidden без text-overflow: ellipsis + title-атрибута.
• В карточках новостей и афиши: ограничить заголовок через line-clamp-2/line-clamp-3, не обрезая по середине слова.
• Проверить таблицы на мобильных — добавить горизонтальный скролл (overflow-x: auto) вместо обрезания.
• Поля форм: min-height вместо фиксированного height, чтобы текст не выходил за границы.

Этап 5 — CSS-переменные и темы

Пересмотреть значения в app/assets/css/main.css для переменных:

/* Текст */
--ui-text
--ui-text-muted
--ui-text-highlighted
--ui-text-dimmed      /* placeholder — особо проверить */

/* Фон */
--ui-bg
--ui-bg-muted
--ui-bg-elevated
--ui-bg-inverted

/* Акцент / статусы */
--ui-primary
--ui-primary-contrast  /* текст НА кнопке — критично */
--ui-success
--ui-warning
--ui-error

Для каждой переменной рассчитать контраст относительно фона темы и зафиксировать в комментарии.

Этап 6 — Тестирование

• Axe DevTools (расширение Chrome) — полный прогон по всем страницам.
• Lighthouse Accessibility — целевой балл ≥ 90.
• Ручная проверка с включённым NVDA / VoiceOver на ключевых маршрутах.
• Проверка при prefers-contrast: more и prefers-color-scheme: dark.
• Zoom 200% в Chrome и Firefox — ничего не обрезается.

Приоритет

1. Критично (сейчас): контраст кнопок и основного текста во всех темах.
2. Важно: единицы ch, line-clamp, обрезание в карточках.
3. Желательно: max-width: 75ch для длинных текстов, межстрочный интервал.