Доступность (a11y) в WordPress
Что такое веб-доступность
Заголовок раздела «Что такое веб-доступность»Веб-доступность (a11y) — проектирование сайтов, которые работают для всех, включая людей с нарушениями зрения, слуха, моторики и когнитивными особенностями. При проектировании для доступности вы улучшаете опыт для всех пользователей, а также повышаете SEO и юзабилити. Во многих странах это законодательное требование.
WordPress стремится соответствовать WCAG 2.2 уровня AA.
Ключевые принципы
Заголовок раздела «Ключевые принципы»Цветовой контраст
Заголовок раздела «Цветовой контраст»Между текстом и фоном должен быть достаточный контраст. Инструмент: WebAIM Contrast Checker. WordPress встроенно предупреждает, если выбранная комбинация цветов не проходит проверку контраста.
Типографика
Заголовок раздела «Типографика»- Базовый размер шрифта — минимум 16px (рекомендация)
- Межстрочный интервал (line-height) — минимум 1.5
- Избегайте CAPS и small caps для длинного текста
- Подчёркивание — только для ссылок
- Не используйте выравнивание по ширине (justify) — WordPress по умолчанию его не поддерживает, так как неравномерные пробелы ухудшают читаемость
Структура и вёрстка
Заголовок раздела «Структура и вёрстка»- Чёткая, консистентная компоновка с логическим порядком чтения
- Правильная иерархия заголовков — H2 → H3 → H4 без пропусков уровней
- WordPress подсвечивает неправильные уровни заголовков оранжевым в Document Overview → Outline
Навигация
Заголовок раздела «Навигация»- Меню должно работать и мышью, и с клавиатуры
- Все интерактивные элементы доступны через Tab
- Видимый фокус на активном элементе
- Каждое поле формы должно иметь явную метку (label)
- Все элементы форм должны быть operable с клавиатуры
- Кнопки — осмысленный текст, описывающий действие
Изображения и медиа
Заголовок раздела «Изображения и медиа»- Alt text для всех изображений — краткое описание для скринридеров и SEO
- Субтитры для видео
- Транскрипты для аудио
WordPress-специфичные советы
Заголовок раздела «WordPress-специфичные советы»Выбор темы
Заголовок раздела «Выбор темы»Ищите темы с меткой Accessibility Ready в репозитории WordPress.org — они дадут фору в доступности.
Плагины
Заголовок раздела «Плагины»Некоторые плагины могут создавать проблемы с доступностью. Проверяйте: можно ли пользоваться плагином без мыши, только с клавиатуры? Используйте WAVE для инспекции.
Инструменты тестирования
Заголовок раздела «Инструменты тестирования»Встроенные помощники WordPress
Заголовок раздела «Встроенные помощники WordPress»- Семантическая структура: Document Overview → Outline проверяет правильность заголовков
- Цветовой контраст: WordPress предупредит, если сочетание цветов неконтрастно
Плагины для тестирования
Заголовок раздела «Плагины для тестирования»| Плагин | Что проверяет |
|---|---|
| WP Tota11y | Уровни заголовков, цветовой контраст, ссылки, метки форм, alt text. Screen Reader Wand для просмотра глазами скринридера |
| Sa11y | Расширенные проверки: читаемость, ссылки, контраст, метки форм. Цветовые фильтры для имитации дальтонизма |
| Editoria11y | Структура контента: уровни заголовков, текст ссылок, alt text. Описывает ошибки простым языком, предлагает исправления |
| Accessibility Checker | Секция в редакторе записи/страницы + кнопка на фронтенде. Сводка ошибок, детальные объяснения, сниппеты кода, опция игнорирования |
Процесс, а не разовая задача
Заголовок раздела «Процесс, а не разовая задача»Доступность — непрерывный процесс. Проводите аудит в процессе дизайна, а не после. Не откладывайте на потом.
Материалы и источники
Заголовок раздела «Материалы и источники»- Web accessibility guidelines (learn.wordpress.org)
- Testing your content for accessibility (learn.wordpress.org)