Доступность
Синонимы: accessibility, a11y, веб-доступность, инклюзивный дизайн, WCAG
NAME
Доступность — дизайн и ux
DESCRIPTION
Доступность (Accessibility, a11y) — практика создания сайтов и приложений, которыми могут пользоваться все люди, включая тех, у кого есть ограничения по зрению, слуху, моторике или когнитивным функциям. «a11y» — сокращение (a + 11 букв + y). Это не «фича для инвалидов», а базовое качество продукта, как скорость загрузки.
4 принципа WCAG (Web Content Accessibility Guidelines):
| Принцип | Суть | Пример нарушения |
|---|---|---|
| Perceivable (Воспринимаемость) | Контент можно воспринимать разными органами чувств | Картинка без alt-текста |
| Operable (Управляемость) | Интерфейсом можно управлять разными способами | Кнопка, недоступная с клавиатуры |
| Understandable (Понятность) | Интерфейс предсказуем и понятен | Нестандартные иконки без подписей |
| Robust (Надёжность) | Работает с разными технологиями | Невалидный HTML |
Уровни соответствия WCAG 2.1:
| Уровень | Что означает | Требуется для |
|---|---|---|
| A (базовый) | Минимальные требования | Редко достаточно |
| AA (средний) | Оптимальный баланс | 95% проектов, гос. сайты |
| AAA (высокий) | Максимальная доступность | Специализированные сервисы |
Кто пользуется доступностью (статистика):
- 16% населения мира — люди с инвалидностью (WHO, 2023)
- 2.2 млрд человек с нарушениями зрения
- 466 млн с нарушениями слуха
- 15-20% пользователей имеют временные ограничения (сломал руку, яркий свет)
- Все пользователи старше 60 лет — возрастные изменения
Что проверять в первую очередь (чек-лист):
- Контрастность — минимум 4.5:1 для текста (WCAG AA)
- Alt-тексты — у всех информативных изображений
- Клавиатурная навигация — все элементы доступны с Tab
- Фокус-индикаторы — видно, где сейчас курсор
- Подписи форм —
<label>связанный с каждым input - Заголовки — правильная иерархия h1-h6
- ARIA-атрибуты — где семантики HTML недостаточно
- Субтитры — у всех видео
Инструменты проверки:
- Lighthouse (Chrome DevTools) — автоматический аудит
- axe DevTools — расширение для браузера
- WAVE — визуализация ошибок доступности
- Contrast Checker — WebAIM для проверки цветов
- NVDA / VoiceOver — скринридеры для ручного теста
Юридические риски (2026):
- США: ADA Title III — иски к сайтам ( Domino's Pizza case)
- ЕС: European Accessibility Act (с июня 2025)
- Россия: 152-ФЗ + приказы Минцифры для гос. сайтов
- Штрафы: от $10 000 до $500 000 за нарушения
Кейс WEBVISUAL: Клиент — интернет-аптека (YMYL-сайт). Было: Lighthouse accessibility score 34/100, контрастность 2.1:1 на серых кнопках. Провели аудит и доработку:
- Подняли контрастность текста до 5.2:1 (WCAG AA)
- Добавили alt-тексты к 1 200 изображениям товаров
- Настроили фокус-индикаторы (#A51E22, 2px outline)
- Связали все
<label>с полями форм - Добавили skip-link «Перейти к контенту»
- Проверили на скринридере NVDA (Windows) и VoiceOver (macOS)
Результат: Lighthouse accessibility score вырос с 34 до 96. Аудит от Росздравнадзора пройден с первого раза. Конверсия среди пользователей 60+ выросла на 38% (они дольше оставались на сайте). Бюджет: 85 000 ₽ (аудит + доработка).
СМ. ТАКЖЕ
Фронтенд(7)