Кратко и по делу: примерные приёмы для адаптивности + доступности (a11y) на CSS/HTML, с фрагментами и списком тестов/инструментов.
1) Семантика и структура
- Используйте семантические теги: `header`, `nav`, `main`, `aside`, `footer`, `h1..h6`, `button`, `form`, `label`, `fieldset`, `legend`.
- Указывайте язык страницы: ``.
- Пример «пропустить навигацию»:
Пропустить навигацию
2) Клавиатурная навигация и фокус
- Все интерактивные элементы — реальные элементы (`button`, `a`, `input`) или `role`+`tabindex`.
- Видимый фокус: `:focus, :focus-visible { outline: 3px solid #2563eb; }`.
- Убирайте «keyboard traps», используйте `tabindex="0"` для управляемых областей по необходимости.
- Пример раскрывающегося меню:
Меню...
3) Формы и сообщения об ошибках
- Явные `` + `aria-describedby` для подсказок/ошибок.
- Предоставляйте текстовые подсказки и ARIA (например, `aria-invalid="true"`).
- Пример:
EmailВведите рабочий адрес
4) Цвет и контраст
- Минимальные требования контраста: для обычного текста — не ниже $4.5:1$, для крупного текста — не ниже $3:1$.
- Не полагаться только на цвет (добавляйте иконку/текст/узор для статуса).
5) Шрифты и масштабирование
- Используйте относительные единицы: `rem`, `em`, `vh/vw` и гибкую типографику:
`font-size: clamp($1rem$, $2vw$, $1.25rem$);`
- Поддерживайте масштабирование до $200\%$ без ломки верстки.
6) Адаптивность (responsive)
- Viewport meta: ``.
- Мобильная стратегия: mobile-first + медиа-запросы:
`@media (min-width: $768\text{px}$) { /* планшет и выше */ }`
Частые точки: $480\text{px}$, $768\text{px}$, $1024\text{px}$.
- Гибкая сетка: Flexbox / Grid; пример Grid:
`.grid { display: grid; grid-template-columns: 1fr; } @media (min-width: $768\text{px}$) { .grid { grid-template-columns: 1fr 3fr; } }`
7) Адаптивные изображения и медиа
- Используйте `srcset`/`sizes` или `` для разных разрешений:
``
- Указывайте `alt` для изображений; для декоративных — пустой `alt=""`.
- Видео: субтитры, аудиодескрипция, текстовые транскрипты.
8) Предпочтения пользователя (reduced motion, contrast, prefers-color-scheme)
- Уменьшение анимаций:
`@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }`
- Поддержка тёмной темы: `@media (prefers-color-scheme: dark) { ... }`
- Поддержка повышенного контраста: `@media (prefers-contrast: more) { ... }`
9) Динамический контент и ARIA
- Для обновляемого контента применяйте `aria-live` или `role="status"`/`alert`.
- Не дублируйте семантику ARIA, если нативный элемент уже семантический.
10) Размеры сенсорных целей
- Минимальный рекомендуемый размер — примерно $44\times 44\text{px}$ для сенсорных зон.
11) Примеры CSS-проверок
- `:focus-visible` для контроля видимости фокуса.
- `img { max-width: 100%; height: auto; }` для отзывчивости изображений.
12) Тесты (ручные)
- Клавиатурная навигация: пройти весь интерфейс только с клавиатурой (Tab, Shift+Tab, Enter, Space, Arrow).
- Скринридер: пройти ключевые сценарии с NVDA (Windows), VoiceOver (macOS/iOS), TalkBack (Android).
- Увеличение/масштаб: проверить при увеличении до $200\%$.
- Отключение стилей: страница должна оставаться понятной без CSS.
- Цветовая проверка: проверка основных экранов на контраст $4.5:1$.
- Сенсорные устройства: проверка тапа/жестов, целевые зоны $44\times 44\text{px}$.
- Проверка при включённом `prefers-reduced-motion` и тёмной теме.
13) Автоматизированные инструменты
- Браузерные и CI-инструменты:
- axe (Dequeue): расширение и библиотека — axe DevTools / axe-core / jest-axe / cypress-axe
- Lighthouse (Chrome) — accessibility audits
- WAVE (WebAIM) — расширение / веб-инструмент
- Accessibility Insights (Microsoft)
- pa11y / pa11y-ci
- tota11y — визуальные подсказки
- contrast checkers: WebAIM Contrast Checker
- Команды/CI: запуск axe-cli или pa11y в пайплайне для регрессионного тестирования.
14) Отчётность и приоритеты
- Классифицируйте проблемы: критичные (войти/оплатить/формы), высокие (навигация), средние/низкие.
- Автоматизируйте проверки в CI + ручное тестирование с пользователями с ОВЗ (UX testing).
15) Быстрый чек-лист при привёрстке
- Семантика HTML — да.
- Видимый фокус — да.
- Контраст — $>=4.5:1$ для текста.
- Кнопки/ссылки доступны с клавиатуры.
- Изображения имеют `alt`.
- Формы — метки и ошибки озвучены.
- Поддержка масштабирования до $200\%$.
- Анимации отключаемы (prefers-reduced-motion).
Инструменты для начала: установить axe DevTools + Lighthouse, прогнать pa11y в CI, ручные проверки NVDA/VoiceOver, WebAIM Contrast Checker.