Нельзя проверить конкретные ошибки без фрагмента, поэтому ниже — сжатый чек‑лист типичных проблем доступности и практические исправления (при необходимости можете прислать фрагмент — разберу конкретно).
1) Структура и семантика
- Проблема: использование div/span вместо семантических элементов (заголовки, nav, main, button).
- Исправление: применяйте семантику: `, , , , , , , , , `; правильная иерархия заголовков (h1→h2…).
2) Язык документа
- Проблема: отсутствует атрибут языка.
- Исправление: ``.
3) Картинки и иконки
- Проблема: отсутствуют или некорректны `alt`.
- Исправление: декоративные — `alt=""`; информативные — содержательное `alt="..."`; иконки управления — `aria-hidden="true"` + текст в кнопке/aria-label.
4) Управление формами
- Проблема: отсутствуют метки, подсказки и сообщения об ошибках.
- Исправление: `label for="id"` и `input id="id"`, `aria-describedby` для подсказок, `aria-invalid="true"` и `aria-errormessage` для ошибок, `autocomplete` где применимо.
5) Клавиатурная доступность
- Проблема: элементы не доступны клавиатурой; используются `onclick` без клавиатурных обработчиков; tabindex > 0.
- Исправление: используйте нативные элементы (``), избегайте `tabindex` > $0$ (неуправляемые последовательности фокуса), разрешённые значения: `tabindex="$...$` — для примера `tabindex="$0$"` (вписывает в таб‑порядок), `tabindex="$-1$"` — для программного фокуса. Если кастомный элемент с `role="button"`, добавьте `tabindex="$0$"` и обработку клавиш Enter/Space.
6) Видимый фокус
- Проблема: после TAB фокус не виден.
- Исправление: обеспечить контрастный стиль для `:focus` или `:focus-visible` (не убирать outline).
7) Модальные окна и динамический контент
- Проблема: модалки не блокируют фон, фокус теряется; динамика не объявляется скринридеру.
- Исправление: модаль — `role="dialog" aria-modal="true"`, реализовать «focus trap», возвращать фокус вызывающему элементу; обновления — `aria-live` (`polite`/`assertive`) или использовать `role="status"`.
8) ARIA: не злоупотреблять и правильно использовать
- Проблема: неправильные/лишние ARIA (несоответствие native элементам).
- Исправление: предпочитайте натив. Если ARIA — следуйте Accessible Name and Role computation; не используйте `role` без понимания. Валидируйте с axe.
9) Контраст и цвет
- Проблема: низкая контрастность текста/фона; передача информации только цветом.
- Исправление: обеспечить контраст текста минимум $4.5:1$ для обычного текста и минимум $3:1$ для крупного текста (WCAG $2.1$ AA). Не полагайтесь только на цвет — добавляйте иконки/текст/подчеркивания.
10) Медиа
- Проблема: видео/аудио без субтитров/транскриптов; авто‑воспроизведение.
- Исправление: добавить субтитры, описания, управление, возможность отключить авто‑воспроизведение; предоставить текстовую расшифровку.
11) Таблицы и списки
- Проблема: данные в таблицах без ``, сложные таблицы без captions.
- Исправление: используйте ``, `scope`, ``, ARIA для сложных связей.
12) Текст и масштабирование
- Проблема: фиксированный размер шрифтов, неадаптивный интерфейс.
- Исправление: не жестко задавать размеры в px; поддержать масштабирование и `zoom`; проверьте при 200% зума.
13) Анимации и motion
- Проблема: интенсивные анимации могут вызывать дискомфорт.
- Исправление: учитывать `prefers-reduced-motion` и предоставлять опцию отключения.
14) Ссылки и кнопки
- Проблема: неинформативные тексты ссылок ("кликните здесь").
- Исправление: ссылочные тексты должны быть осмысленны вне контекста: "Скачать отчет за 2024 год", использовать `` для навигации и `` для действий.
15) Тестирование и валидация
- Делайте аудит: автоматические инструменты (Lighthouse, axe), ручное тестирование клавиатурой, тестирование со скринридером (NVDA/VoiceOver), проверка контраста (Contrast checker), проверка на мобильных устройствах.
Короткие примеры изменений (псевдокод):
- Кнопка: заменить `` на `…`.
- Поле: `Email`.
- Модал: `…` + фокус‑трап.
Если прикрепите конкретный фрагмент — укажу точные ошибки и дам исправленный код.