SEO
Веб-доступность: практическое руководство по WCAG для разработчиков
Веб-доступность обеспечивает работу сайтов для всех, включая людей с ограниченными возможностями. Помимо социальной ответственности, доступность всё чаще становится юридическим требованием и напрямую влияет на SEO.
Почему доступность важна
- Законодательство: ADA, EU Accessibility Act и подобные законы требуют доступных сайтов
- Аудитория: ~15% мирового населения имеют ту или иную форму инвалидности
- SEO: доступный HTML = семантический HTML, который поисковики понимают лучше
- UX для всех: субтитры полезны в шумном окружении, клавиатурная навигация — для опытных пользователей
Принципы WCAG: POUR
Воспринимаемость (Perceivable)
- Изображения имеют
altс описанием - Видео имеют субтитры и транскрипцию
- Цвет — не единственный способ передачи информации
- Достаточный контраст текста (4.5:1 для обычного, 3:1 для крупного)
Управляемость (Operable)
- Вся функциональность доступна с клавиатуры
- Достаточно времени для чтения и взаимодействия
- Контент не вызывает судорог (нет мигания >3 раз/сек)
Понятность (Understandable)
- Текст читаем и предсказуем
- Страницы ведут себя предсказуемо
- Пользователи могут избежать и исправить ошибки
Надёжность (Robust)
- Валидный HTML для ассистивных технологий
- ARIA-атрибуты используются корректно
Практическая реализация
Семантический HTML
<!-- Плохо -->
<div class="nav">
<div onclick="...">Главная</div>
</div>
<!-- Хорошо -->
<nav aria-label="Основная навигация">
<a href="/">Главная</a>
</nav>
Alt-текст изображений
<!-- Декоративное -->
<img src="border.png" alt="" role="presentation">
<!-- Информативное -->
<img src="chart.png" alt="Продажи выросли на 45% в Q3">
<!-- Функциональное -->
<button><img src="search.svg" alt="Поиск"></button>
Клавиатурная навигация
- Все интерактивные элементы доступны через Tab
- Порядок фокуса совпадает с визуальным
- Видимый индикатор фокуса (никогда
outline: noneбез замены) - Escape закрывает модальные окна
Формы
<label for="email">Email</label>
<input type="email" id="email" required aria-describedby="email-help">
<span id="email-help">Мы никогда не передадим ваш email</span>
<input type="email" aria-invalid="true" aria-errormessage="email-error">
<span id="email-error" role="alert">Введите корректный email</span>
Контраст
- Обычный текст (<18px): минимум 4.5:1
- Крупный текст (≥18px bold или ≥24px): минимум 3:1
- UI-компоненты: минимум 3:1
ARIA
ARIA добавляет семантику когда нативный HTML не может выразить UI-паттерн:
role— что это? (tab, dialog, alert)aria-label— доступное имяaria-expanded— раскрыт ли элемент?aria-live— анонсировать динамические обновления
Первое правило ARIA: если можно использовать нативный HTML — используйте его.
Инструменты тестирования
- Lighthouse: встроен в Chrome DevTools
- axe DevTools: расширение для детального тестирования
- WAVE: инструмент оценки доступности
- Скринридеры: VoiceOver (Mac), NVDA (Windows), JAWS
- Клавиатура: отключите мышь и пройдите по сайту
Заключение
Доступность — не доработка, а фундаментальное качество хорошей веб-разработки. Начните с семантического HTML, добавьте лейблы и alt-текст, обеспечьте клавиатурную навигацию и тестируйте с ассистивными технологиями.
Проверьте ваш сайт прямо сейчас
Проверить →