Кратко, с практическими подходами (HTML/CSS) и важными техническими/UX аспектами.
Основные принципы
- Семантика: используйте реальные элементы (header, nav, main, footer, button, a, h1–h6, ul/li) и корректные aria-атрибуты для компонентов, чтобы экранные читалки и увеличители корректно работали.
- Масштабируемость: всё должно быть сформулировано в относительных единицах (rem/em/%) и управляемо через CSS-переменные, чтобы пользователь мог увеличить шрифт без ломки верстки.
- Контраст и читаемость: цветовой контраст текста/фона соответствует WCAG (нормальный текст $\ge 4.5:1$, крупный текст $\ge 3:1$).
- Ориентированность на управление пользователем: поддержка системных настроек (увеличение, высококонтрастная тема, снижение анимаций).
Технические приёмы (CSS/HTML) — примеры и советы
1) Базовая масштабируемая типографика
- Корень и переменная:
html { --base: $16px$; font-size: var(--base); }
body { font-size: $1rem$; line-height: $1.5$; }
- Использовать rem/em для всех размеров шрифтов, отступов и размеров элементов.
2) Плавная/флюидная типографика
- clamp для адаптивного размера:
html { font-size: clamp($14px$, $1.2vw+0.5rem$, $20px$); }
- Это даёт масштабирование между минимумом $14px$ и максимумом $20px$.
3) Управление через CSS-переменные (темы и масштаб)
- Пример:
:root { --scale: $1$; --bg: #fff; --fg: #111; }
.large { --scale: $1.25$; } /* UI-кнопка "Увеличить" ставит класс на body */
body { transform: none; font-size: calc(var(--scale) * $1rem$); color: var(--fg); background: var(--bg); }
4) Контраст и высококонтрастные режимы
- Поддержать системные запросы:
@media (prefers-contrast: high) { /* сильнее контрасты */ }
@media (forced-colors: active) { /* forced-colors для Windows */ }
- Убедиться, что все текстовые блоки соблюдают контраст $\ge 4.5:1$ (инструменты: axe, Lighthouse, contrast checkers).
5) Фокус и видимость интерактивных элементов
- Сильный фокус:
:focus { outline: $3px$ solid Highlight; outline-offset: $2px$; }
:focus:not(:focus-visible) { outline: none; } /* используя :focus-visible для UX */
- Размеры касания: минимальные цельные области \(44\px\) × \(44\px\):
.btn { min-width: $44px$; min-height: $44px$; padding: $0.5rem$ $0.75rem$; }
6) Удобство чтения: межстрочный интервал и трекинг
- Рекомендации: line-height $1.4$–$1.6$, letter-spacing для узких шрифтов:
p { line-height: $1.5$; letter-spacing: $0.01em$; }
7) Избегать фиксированных ширин, и допускать перенос текста
- Не использовать overflow:hidden на тексте; гибкие контейнеры:
.content { max-width: $70ch$; width: $100\%$; }
- Тексты должны перефлоучиваться при увеличении шрифта и масштабировании страницы (тестировать при зуме $200\%$).
8) Анимации и движение
- Поддержать prefers-reduced-motion:
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
- Предлагать пользователю отключение анимаций.
9) Элементы управления и доступность
- Использовать native controls: , , вместо div+JS.
- Ария для сложных виджетов: role, aria-expanded, aria-controls, aria-label и т. п.
- Лейблы и помощники: , aria-describedby для подсказок.
10) Изображения, контент и альтернативы
- Текст в изображениях — плохой; если есть, дублировать текст в HTML.
- Всегда alt для , длинные описания там, где нужно.
- Для сложных диаграмм — доступные описания и таблицы данных.
UX-аспекты (поведение, тестирование, настройка)
- Предоставьте быстрые переключатели: крупный шрифт, высококонтрастная тема, упрощённый режим (минимум отвлекающих элементов).
- Ясные, крупные контролы и радиус клика $\ge 44px$. Кнопки с понятными метками, не только иконки.
- Используйте простую иерархию заголовков — одна главная .
- Тестирование: проверять с экранными читалками (NVDA/VoiceOver), с зумом $200\%$, в Windows High Contrast, на мобильных с увеличенным шрифтом.
- Наблюдать за вниманием: уменьшите визуальный шум, увеличьте поля вокруг текста, обеспечьте контраст активного состояния.
Краткие контрольные цифры/метрики
- Базовый размер шрифта: обычно $16px$ (использовать как ориентир, но не жёстко).
- Минимальный целевой размер касания: $44\times 44$ (CSS px).
- Контраст: текст обычный $\ge 4.5:1$, крупный $\ge 3:1$.
- Тестовый зум: проверить $200\%$.
Небольшие примеры кода (минимум)
- Семантика:
A+ - Фокус и размеры:
.btn { min-width: $44px$; min-height: $44px$; padding: $0.5rem$; }
.btn:focus { outline: $3px$ solid #005fcc; outline-offset: $2px$; }
- prefers-reduced-motion:
@media (prefers-reduced-motion: reduce) { * { animation-duration: $0s$ !important; transition-duration: $0s$ !important; } }
Итог: ставьте во главу UX — семантику, масштабируемость и контроль пользователя; технически — относительные единицы, CSS-переменные, медиазапросы для системных настроек, явные фокусные стили, высокая контрастность и тестирование при зуме/с экранными читалками.