Доступность веб-сайтов означает создание сайтов, которые могут эффективно использовать люди с ограниченными возможностями. Это включает в себя людей, которые используют программы чтения с экрана, навигацию только с помощью клавиатуры, голосовое управление, увеличители экрана или имеют ограничения по восприятию цветов. В экосистеме WordPress доступность является как юридическим требованием во многих юрисдикциях, так и практическим способом достичь более широкой аудитории — более 1 миллиарда людей по всему миру имеют ту или иную форму инвалидности.
В этом руководстве мы рассматриваем практические шаги для обеспечения доступности вашего сайта на WordPress, следуя Руководству по доступности веб-контента (WCAG) 2.2 на уровне AA — стандарту, который чаще всего требуется законодательством о доступности, включая ADA (США), EAA (ЕС) и AODA (Канада).
Понимание принципов WCAG 2.2
WCAG организован вокруг четырех принципов, известных как POUR:
| Принцип | Что это значит | Примеры WordPress |
|---|---|---|
| Воспринимаемый | Пользователи могут воспринимать контент через зрение, слух или осязание | Альтернативный текст для изображений, подписи для видео, достаточный контраст цветов |
| Управляемый | Пользователи могут навигировать и взаимодействовать с интерфейсом | Навигация с помощью клавиатуры, ссылки для пропуска, отсутствие ловушек для клавиатуры |
| Понятный | Пользователи могут понять контент и как использовать интерфейс | Ясный язык, последовательная навигация, сообщения об ошибках |
| Надежный | Контент работает во всех браузерах, на всех устройствах и с вспомогательными технологиями | Корректный HTML, правильные роли ARIA, семантическая разметка |
Выбор доступной темы
HTML-структура и CSS вашей темы WordPress составляют основу доступности вашего сайта. При выборе темы WordPress оцените следующие факторы доступности:
- Семантический HTML: Тема использует правильные элементы HTML5 (header, nav, main, article, aside, footer) вместо универсальных div для всего
- Иерархия заголовков: H1 → H2 → H3 следует логическому порядку без пропуска уровней
- Ссылки для пропуска: Ссылка "Перейти к контенту" присутствует как первый элемент, доступный для фокуса, позволяя пользователям клавиатуры обойти навигацию
- Навигация с помощью клавиатуры: Все интерактивные элементы (ссылки, кнопки, формы) доступны и могут использоваться с помощью клавиши Tab
- Индикаторы фокуса: Элементы в фокусе имеют видимый контур или выделение (не удаляется с помощью outline: none)
- Контраст цветов: Текст соответствует коэффициентам контраста WCAG AA (4.5:1 для обычного текста, 3:1 для крупного текста)
Темы, помеченные как "готовые к доступности" на WordPress.org, прошли базовый обзор доступности. Однако эта метка указывает на отправную точку, а не на полное соответствие WCAG. Среди популярных тем GeneratePress особенно хорошо закодирована с чистым семантическим HTML и правильными ориентирами ARIA.
Доступность изображений
Альтернативный текст
Каждое значимое изображение нуждается в описательном альтернативном тексте. WordPress делает это простым — поле альтернативного текста доступно в Медиа-библиотеке и при вставке изображений в контент.
| Тип изображения | Подход к альтернативному тексту | Пример |
|---|---|---|
| Фото продукта | Опишите продукт | "Красная кожаная сумка через плечо с золотой пряжкой, вид спереди" |
| Скриншот | Опишите, что показывает скриншот | "Панель управления WordPress, показывающая страницу Плагинов с 12 активными плагинами" |
| Инфографика | Подведите итог ключевой информации | "Сравнительная таблица: функции Elementor и Gutenberg. У Elementor более 100 виджетов, у Gutenberg более 90 блоков" |
| Декоративное изображение | Пустой alt (alt="") | Фоны, разделители, чисто декоративные иконки |
| График/диаграмма | Опишите тренд или ключевую точку данных | "Линейный график, показывающий увеличение трафика сайта на 45% с января по декабрь 2025 года" |
Оптимизация изображений для доступности
- Не используйте изображения текста — используйте фактический текст, оформленный с помощью CSS
- Убедитесь, что текст, встроенный в изображения, соответствует требованиям по контрасту
- Предоставьте длинные описания для сложных изображений (графиков, диаграмм) с использованием соседнего абзаца или атрибута longdesc
- Убедитесь, что изображения имеют подходящие размеры, чтобы не вызывать сдвиги макета (CLS)
Навигация с помощью клавиатуры
Многие пользователи полностью навигируют по веб-сайтам с помощью
Распространенные проблемы доступности с клавиатуры
- Ловушки фокуса: Модальные диалоги, которые не позволяют вернуться к основному контенту (модальные окна должны удерживать фокус внутри, а Escape должен их закрывать)
- Отсутствие индикаторов фокуса: CSS, который удаляет стандартный контур у элементов в фокусе (никогда не используйте *:focus { outline: none } глобально)
- Неинтерактивные элементы с обработчиками кликов: Div или span с событиями onClick, которые недоступны с клавиатуры (используйте кнопки или ссылки вместо этого)
- Выпадающие меню, которые открываются только при наведении: Пользователи клавиатуры не могут активировать состояния наведения. Меню должно открываться при фокусе/нажатии Enter
- Пользовательские компоненты без ARIA: Вкладки, аккордеоны и карусели, созданные без правильных ролей ARIA и обработчиков клавиатуры
Цвет и контраст
WCAG AA требует минимальные коэффициенты контраста:
| Элемент | Минимальный коэффициент | Пример (Успех) | Пример (Неудача) |
|---|---|---|---|
| Обычный текст (<18px) | 4.5:1 | #333 на #fff (12.6:1) | #999 на #fff (2.8:1) |
| Крупный текст (≥18px или ≥14px жирный) | 3:1 | #555 на #fff (7.4:1) | #aaa на #fff (2.3:1) |
| Компоненты UI (кнопки, поля ввода) | 3:1 | Синяя кнопка #2563eb (4.6:1) | Светло-синяя #93c5fd (1.8:1) |
| Не текстовый контент (значки, границы) | 3:1 | Темный значок на светлом фоне | Светло-серый значок на белом |
Используйте инструменты, такие как WebAIM's Contrast Checker или расширение браузера axe, чтобы проверить коэффициенты контраста. Не полагайтесь только на цвет для передачи информации — используйте текстовые метки, узоры или значки в дополнение к цветовой кодировке.
Доступность форм
Формы — одна из самых критических областей для доступности. Используя Gutenberg blocks, Gravity Forms или WPForms:
- Пометьте каждое поле ввода: Используйте элемент <label>, связанный с каждым полем через атрибут for/id. Текст-заполнитель не является заменой меткам
- Группируйте связанные поля: Используйте <fieldset> и <legend> для групп связанных полей ввода (например, поля адреса доставки)
- Предоставляйте сообщения об ошибках: Когда валидация не проходит, укажите, какое поле содержит ошибку, и опишите, как ее исправить. Используйте aria-describedby, чтобы связать сообщения об ошибках с их полями
- Отмечайте обязательные поля: Используйте атрибут required и визуально указывайте обязательные поля с помощью текста (не только звездочки)
- Поддерживайте автозаполнение: Добавьте соответствующие атрибуты автозаполнения (name, email, tel, address-line1), чтобы браузеры могли автоматически заполнять данные формы
Доступность контента
Структура заголовков
Правильная иерархия заголовков помогает пользователям экранных считывателей понять структуру страницы и навигировать между разделами. Правила:
- Один H1 на страницу (название страницы/поста)
- H2 для основных разделов
- H3 для подсекций внутри H2
- Никогда не пропускайте уровни (H2 → H4 без H3 неверно)
- Не используйте заголовки для визуального оформления — используйте CSS классы вместо этого
Текст ссылок
Избегайте общих текстов ссылок, которые не имеют смысла вне контекста:
| Плохой текст ссылки | Доступный текст ссылки |
|---|---|
| "Нажмите здесь" | "Прочитайте руководство по безопасности WordPress" |
| "Читать далее" | "Прочитайте полный обзор Elementor Pro" |
| "Узнать больше" | "Узнайте, как оптимизировать оформление заказа WooCommerce" |
| "Здесь" | "Скачайте отчет о производительности" |
Таблицы
Таблицы данных должны включать:
- <thead> с элементами <th> для заголовков столбцов (с scope="col")
- <th scope="row"> для заголовков строк
- Элемент <caption>, описывающий назначение таблицы
- Простая структура — избегайте объединенных ячеек, когда это возможно, так как их трудно интерпретировать экранным считывателям
Тестирование доступности вашего сайта
| Инструмент | Тип | Что он тестирует |
|---|---|---|
| axe DevTools | Расширение браузера | Автоматизированный WCA |
| Обнаружение нарушений G | ||
| WAVE | Расширение для браузера / веб | Оценка визуальной доступности с помощью встроенных аннотаций |
| Lighthouse | Chrome DevTools | Аудит доступности с оценками и рекомендациями |
| Тестирование с клавиатуры | Ручное | Навигация по всему сайту, используя только Tab, Enter и Escape |
| Читалка экрана | Ручное | Тестирование с VoiceOver (Mac), NVDA (Windows) или TalkBack (Android) |
Автоматизированные инструменты обнаруживают примерно 30-50% проблем с доступностью. Ручное тестирование с клавиатурой и читалкой экрана необходимо для выявления проблем, связанных с взаимодействием, которые автоматизированные инструменты не могут обнаружить.
Плагины WordPress для доступности
- WP Accessibility: Добавляет ссылки для пропуска, исправляет общие проблемы с доступностью, добавляет панель инструментов для пользовательских предпочтений
- One Click Accessibility: Добавляет панель инструментов доступности на фронтенде (размер шрифта, контраст, выделение ссылок)
- Шаблоны для старта с доступностью: Astra и GeneratePress имеют сильные основы доступности в своих базовых темах
Примечание: Плагины наложения доступности (которые добавляют плавающий виджет с кнопками "исправить") подвергаются широкой критике со стороны сообщества доступности. Они не делают сайт доступным — они добавляют поверхностный слой, который на самом деле может мешать вспомогательным технологиям. Сосредоточьтесь на создании доступности в вашей теме и контенте, а не на полагании на наложения.
Для получе��ия дополнительной информации обратитесь к официальной документации: Руководство WCAG, Команда доступности WordPress.
Часто задаваемые вопросы
Доступен ли WordPress из коробки?
Ядро WordPress значительно улучшилось в плане доступности. Административная панель в значительной степени доступна с клавиатуры, а редактор блоков включает ARIA-метки. Однако доступность вашего сайта в значительной степени зависит от используемой темы и плагинов. Тема с плохой HTML-структурой подрывает встроенные функции доступности WordPress.
Нужен ли мне юридически доступный сайт?
Во многих юрисдикциях — да. ADA (США), Европейский закон о доступности (ЕС, вступает в силу в июне 2025 года), AODA (Канада) и аналогичные законы требуют, чтобы сайты были доступными. Конкретные требования зависят от вашего местоположения, типа бизнеса и аудитории. Проконсультируйтесь с юридическим специалистом по требованиям, специфичным для вашей ситуации.
Влияет ли доступность на SEO?
Да, существует значительное пересечение. Правильная структура заголовков, описательный alt-текст, семантический HTML, быстрая загрузка страниц и мобильная адаптивность приносят пользу как доступности, так и SEO. Сайты, которые следуют рекомендациям WCAG, как правило, занимают более высокие позиции, потому что они обеспечивают в корне лучший пользовательский опыт. Для лучших практик SEO смотрите наш контрольный список.
Могут ли конструкторы страниц создавать доступные сайты?
Elementor и другие конструкторы страниц могут создавать доступный контент, если их правильно использовать. Ключевым моментом является обеспечение правильной иерархии заголовков, добавление alt-текста к изображениям, использование семантических виджетов (кнопок вместо стилизованных div) и тестирование навигации с клавиатуры. Сам конструктор не определяет доступность — определяет то, как вы его используете.
Какова самая распространенная ошибка доступности на сайтах WordPress?
Отсутствие или недостаточный alt-текст на изображениях является наиболее часто сообщаемым нарушением WCAG. Второй по распространенности является недостаточный цветовой контраст. Оба легко исправить — они требуют внимания и постоянной практики, а не технической экспертизы.
Как сделать WooCommerce доступным?
Шаблоны по умолчанию WooCommerce имеют разумную доступность. Ключевые области для проверки: alt-текст изображений продуктов, метки форм на полях оформления заказа, навигация по корзине и процессу оформления заказа с клавиатуры, а также доступные сообщения об ошибках для неудач валидации форм. Использование доступной темы в качестве основы значительно уменьшает объем работы, специфичной для WooCommerce.
Создавайте доступные сайты на WordPress
Начните с доступной темы в качестве основы. Просматривайте легкие, хорошо закодированные темы, которые придают приоритет семантическому HTML и соответствию WCAG.
Просмотреть доступные темы →
