♿ Доступность WordPress-сайтов: полное руководство 2026

Когда пользователь не может прочитать ваш текст, нажать кнопку или просто понять, куда ведёт ссылка, он уходит. Не потому что контент плох. Потому что сайт с ним не разговаривает.

С июня 2025 года Европейский акт о доступности (EAA) стал обязательным к исполнению. В Германии, своё национальное Barrierefreiheitsstärkungsgesetz (BFSG). Штрафы, предписания, потеря аудитории. Но за юридическим давлением стоит банальная правда: по данным ВОЗ, ~16% людей в мире, каждый шестой, живут с той или иной формой инвалидности. Игнорировать их, терять каждого шестого посетителя.

WordPress здесь не исключение и не приговор. CMS даёт хорошую основу, но реальная доступность, результат осознанных действий разработчика или владельца. В этом руководстве, пошаговый разбор: от структуры заголовков до клавиатурной навигации, от выбора темы до автоматических проверок. Никакой воды, только то, что можно применить сегодня. 💡 Быстрый обзор:

• Проверьте воспринимаемость: осмысленный alt у каждого изображения, aria-label у иконок, понятный анкор у каждой ссылки.
• Добейтесь контраста 4.5 к 1 для обычного текста и 3 к 1 для крупного через WebAIM Contrast Checker.
• Выстройте иерархию заголовков: одна H1 на странице, затем H2 и H3 без пропусков уровней.
• Убедитесь в доступности с клавиатуры: всё, на что можно нажать мышью, должно работать через Tab и Enter.
• Проверьте формы: явная метка label у каждого поля ввода, плейсхолдер не заменяет описание.
• Запустите WAVE или Lighthouse: автоматический аудит найдёт большинство проблем за полминуты.

Что такое веб-доступность и почему она обязательна в 2026 году

Веб-доступность (web accessibility) — это практика проектирования и разработки сайтов, которыми могут пользоваться люди с любыми физическими и когнитивными возможностями. Скринридеры для незрячих, навигация с клавиатуры для людей с нарушениями моторики, достаточный контраст для слабовидящих, субтитры для глухих.

Стандартом де-факто является WCAG 2.2 (Web Content Accessibility Guidelines) от консорциума W3C. Три уровня: A (минимальный), AA (целевой для большинства) и AAA (наивысший). Законодательство ЕС и США требует уровень AA.

С 28 июня 2025 года вступил в силу European Accessibility Act (директива ЕС 2019/882), он охватывает электронную коммерцию, банкинг, транспорт, медиа. В Германии параллельно действует BFSG. Штрафы варьируются: в Германии до €100 000, во Франции до €250 000. WordPress-сайты коммерческих компаний попадают под регулирование напрямую.

Воспринимаемость: как сделать контент понятным для скринридеров

Первое, с чего начинается доступность, информация должна быть представлена так, чтобы пользователь мог её воспринять хотя бы одним каналом: зрение, слух, осязание.

Изображения и alt-текст. Каждый тег img обязан иметь атрибут alt. Для содержательных картинок, описание того, что на них происходит (5-8 слов, без «картинка» и «изображение»). Для декоративных, alt="" (пустой, но присутствует). Скринридер пропускает пустой alt и не отвлекает пользователя.

1
/* functions.php — принудительный alt для миниатюр записей */
2
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) {
3
    if (empty($attr['alt'])) {
4
        $attr['alt'] = get_the_title($attachment->ID);
5
    }
6
    return $attr;
7
}, 10, 2);

Пустые ссылки и кнопки. Иконка лупы без текста, загадка для скринридера. Всегда добавляйте aria-label к иконочным кнопкам:

1
<button aria-label="Open search">
2
    <span class="dashicons dashicons-search"></span>
3
</button>

Title-атрибуты. Полезны для дополнительного контекста, но не дублируйте в них ссылочный текст, скринридер озвучит одно и то же дважды. WordPress по умолчанию дублирует текст ссылки в title — это стоит отключать.

Цветовой контраст: базовые цифры и инструменты проверки

Недостаточный контраст текста и фона, самая массовая проблема. По данным WebAIM Million 2025, низкий контраст обнаружен на 81% просканированных сайтов.

Минимальные требования WCAG 2.2 AA:

• Обычный текст (менее 18pt): контраст 4.5:1
• Крупный текст (18pt и более или 14pt bold): контраст 3:1
• Иконки и UI-элементы: контраст 3:1

Проверяется за минуту через WebAIM Contrast Checker, вводите цвет текста и фона в HEX, получаете вердикт: Pass / Fail для каждого уровня.

Типичные проблемные зоны в WordPress: серый текст на белом фоне в подвале, светлые кнопки с белой подписью, текст поверх фотографий без затемняющей подложки. Решается правкой CSS, чаще всего затемнением текста на пару тонов.

Структура заголовков: иерархия, которую понимают все

Скринридеры строят «оглавление» страницы из заголовков, пользователь прыгает по H2 и H3, минуя навигацию. Если иерархия нарушена, навигация ломается.

Правила:

• Одна H1 на страницу, как правило, заголовок записи
• H2 для основных разделов, H3 для подразделов внутри H2
• Заголовки не перескакивают: H2 → H4 (минуя H3), ошибка
• Не используйте h*-теги ради размера шрифта, для этого CSS

В WordPress типичная проблема, плагины и темы, вставляющие H2/H3 для своих блоков (слайдеры с заголовком, форма подписки, виджеты сайдбара). Решения три: найти настройку тега в плагине, кастомизировать вывод через фильтр или сменить плагин на более аккуратный. Терпеть битую иерархию «потому что красиво», не вариант.

Навигация и landmarks: ориентиры для скринридера

HTML5-ландмарки дают скринридеру карту страницы. Четыре ключевых тега: header для шапки, nav для навигации, main для основного контента и footer для подвала. Пользователь нажимает горячую клавишу и прыгает сразу к основному контенту.

1
<header role="banner">
2
<nav role="navigation">
3
<main role="main">
4
<footer role="contentinfo">

Роль role="main" должна быть ровно одна на страницу. Большинство современных WordPress-тем используют эти теги из коробки, проверьте через WAVE: раздел «Structure» покажет все landmarks.

Ещё один обязательный элемент, «Skip to Content», невидимая ссылка первым элементом страницы, позволяющая перепрыгнуть меню и сразу попасть к тексту. В WordPress добавляется фильтром или через плагин доступности.

Формы без барьеров

Контактная форма, подписка, оформление заказа, каждое поле должно быть подписано и достижимо с клавиатуры.

*Каждому input, свой label (явный или через aria-label):*

1
<label for="user-email">Email</label>
2
<input id="user-email" name="email" type="email">

Плейсхолдер (placeholder) не заменяет метку, он исчезает при вводе и плохо читается скринридерами. Используйте placeholder только как подсказку формата, а не как название поля.

Группировка: радиокнопки и чекбоксы оборачивайте в <fieldset> с <legend>. Обязательные поля: помечайте текстом «(обязательно)», а не только звёздочкой или цветом.

Клавиатурная навигация: ваша страница без мыши

Некоторые пользователи вообще не используют мышь, тремор, спастика, паралич. Всё должно работать через Tab, Shift+Tab, Enter, Escape и стрелки.

Быстрый тест: откройте страницу и пройдите её только клавишей Tab. Каждый интерактивный элемент должен получать видимый фокус. Модальное окно, закрываться по Escape. Выпадающее меню, раскрываться по Enter.

Типичные провалы WordPress-сайтов:

• Кастомные дропдауны без tabindex и aria-expanded
• outline: none в CSS (убирает индикатор фокуса, не делайте так)
• Бесконечная ловушка фокуса в попапах
• Слайдеры, не управляемые с клавиатуры

Никогда не отключайте стандартный :focus-стиль совсем. Если не нравится браузерная рамка, замените на кастомный :focus-visible с контрастным кольцом.

Масштабирование: не запрещайте пользователю увеличивать текст

Многие мобильные версии WordPress-сайтов блокируют pinch-zoom через мета-тег:

1
<!-- НЕПРАВИЛЬНО — так делать нельзя -->
2
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
3
 
4
<!-- ПРАВИЛЬНО -->
5
<meta name="viewport" content="width=device-width, initial-scale=1">

WCAG 2.2 требует возможность увеличения до 200% без потери контента и функциональности — это Success Criterion 1.4.4. Проверьте, что при зуме текст не обрезается и не наезжает на другие блоки.

Темы WordPress и доступность: на что смотреть при выборе

Ни одна тема не бывает «полностью доступной из коробки», слишком многое зависит от контента и настроек. Но стартовая база важна.

При выборе темы обращайте внимание:

• В описании указано «accessibility ready» — это тег на WordPress.org, означает базовое соответствие требованиям
• Корректная HTML5-структура с landmarks
• Меню навигации, нативное <nav> с <ul>, не div-конструкция с JS
• Наличие :focus-стилей для ссылок и кнопок
• Отсутствие maximum-scale=1.0 в viewport

Стандартные темы WordPress (Twenty Twenty-Four, Twenty Twenty-Five), неплохая отправная точка. Коммерческие темы с визуальными конструкторами, зона риска: чем больше визуальной «магии», тем выше шанс сломанной доступности.

Инструменты для аудита: от быстрой проверки до профессионального тестирования

WAVE Evaluation Tool. Браузерное расширение WAVE от WebAIM, накладывает иконки прямо на страницу: красные, ошибки, жёлтые, предупреждения, зелёные, хорошо. Идеально для первого аудита. Показывает контраст, alt-тексты, структуру заголовков, ARIA-атрибуты.

Google Lighthouse. Встроен в Chrome DevTools (F12 → Lighthouse → Accessibility). Даёт числовую оценку 0-100 и список конкретных элементов для исправления. Удобен для регулярного мониторинга.

Accessibility Checker (Equalize Digital). Плагин для WordPress, Accessibility Checker проверяет контент прямо в редакторе (Gutenberg и Classic). Бесплатная версия сканирует запись перед публикацией, Pro добавляет полный аудит сайта.

WP Accessibility. Ветеран среди плагинов доступности, WP Accessibility от Joe Dolson. Добавляет skip links, ARIA-landmarks, убирает дублирующиеся title-атрибуты ссылок, чинит :focus-стили, убирает tabindex с форм и target из ссылок. Не панацея, но закрывает десяток типовых проблем одним махом.

One Click Accessibility. Плагин с тулбаром, One Click Accessibility позволяет пользователю самому переключить контраст, увеличить шрифт, подчеркнуть ссылки. Это не замена нативной доступности, а дополнительный слой для тех, кому нужны специфические настройки.

NVDA. Бесплатный скринридер для Windows, NVDA. Пройдите свой сайт с выключенным монитором. Услышите то, что слышит незрячий пользователь. VoiceOver (встроен в macOS/iOS), аналог для экосистемы Apple.

Десять шагов к доступному WordPress-сайту

Вот выжимка из всего руководства, контрольный список. Пройдите его после любого редизайна или запуска нового проекта.

• Пропишите alt для каждого изображения. В медиатеке WordPress заполняйте поле «Альтернативный текст». Декоративным картинкам ставьте alt="".

• Опишите ссылки. Текст ссылки должен сообщать, куда она ведёт. «Нажмите здесь» и «Подробнее», плохие анкоры. «Скачать плагин Accessibility Checker», хороший.

• Выстройте заголовки по порядку. Одна H1, затем H2, внутри H2, H3. Проверьте в WAVE: Structure → Heading Outline.

• Доведите контраст до 4.5:1. Пройдитесь WebAIM Contrast Checker по основным цветам темы: текст, заголовки, кнопки, ссылки, подвал.

• Включите видимый фокус. Убедитесь, что :focus не задан как outline: none без замены. Кастомный фокус делается через :focus-visible.

• Проверьте клавиатурную навигацию. Tab, по всем ссылкам и кнопкам, Enter, активация, Escape, закрытие модалок. Застряли, ошибка.

• Подпишите формы. У каждого поля, свой <label>. Обязательные поля, с текстовой пометкой. Группы, в <fieldset>.

• Не блокируйте zoom. Viewport без maximum-scale и user-scalable=no. Проверьте при двукратном увеличении, контент не должен обрезаться.

• Добавьте skip link. Ссылка «Перейти к содержимому» первым элементом <body>. WP Accessibility делает это автоматически.

• Запустите WAVE или Lighthouse. Автоматический аудит не заменит ручное тестирование, но найдёт подавляющее большинство проблем за минуту.

⁉️🤔 Частые вопросы

Обязана ли моя WordPress-страница соответствовать WCAG?

Если ваш сайт представляет бизнес в ЕС, да, с июня 2025 года. Европейский акт о доступности охватывает электронную коммерцию, финансы, транспорт и медиа. В США схожие требования: ADA + Section 508 для госучреждений и их подрядчиков. Личный блог формально не обязан, но значительная доля пользователей с инвалидностью, сильный коммерческий аргумент.

Да, коммерческие сайты в ЕС обязаны соответствовать WCAG 2.2 AA с 28 июня 2025 года по European Accessibility Act. Штрафы устанавливают страны-члены: суммы достигают сотен тысяч евро в зависимости от юрисдикции. В США аналогичные требования через ADA и Section 508. Для личных некоммерческих блогов юридической обязанности нет, но доступность расширяет аудиторию.

Достаточно ли поставить плагин вроде One Click Accessibility?

Плагин-тулбар, вспомогательный слой, а не решение. Он позволяет пользователю изменить контраст или размер шрифта, но не исправит отсутствие alt-текстов, битую иерархию заголовков или недоступные с клавиатуры попапы. Начинайте с нативной доступности в коде и контенте, тулбар добавляйте как финальный штрих.

Нет. Тулбар (One Click Accessibility, UserWay), лишь дополнительная «надстройка». Он не заменяет нативную доступность: не чинит alt-тексты, иерархию заголовков, клавиатурные ловушки и неподписанные поля форм. Начинайте с исправления кода и контента, тулбар, последний штрих.

Как протестировать сайт без покупки дорогих инструментов?

Полноценный цикл из бесплатных средств: WAVE Extension (первый быстрый скан) → Google Lighthouse (числовая оценка + список проблем) → ручной проход с клавиатуры (Tab/Enter/Escape) → NVDA на Windows или VoiceOver на Mac (пройти сайт с выключенным монитором). Этого достаточно для закрытия подавляющего большинства проблем.

Бесплатный цикл: WAVE Extension для браузера → Google Lighthouse в Chrome DevTools → ручной проход с клавиатуры → NVDA (Windows) или VoiceOver (macOS/iOS) для тестирования скринридером. Эти четыре инструмента закрывают 90% задач. Платные сервисы нужны только для регулярного аудита крупных проектов.

Можно ли сделать доступным сайт на визуальном конструкторе (Elementor, WPBakery)?

Можно, но сложнее. Конструкторы генерируют HTML динамически, и некоторые виджеты нарушают иерархию заголовков или вставляют div-обёртки без семантики. Проверяйте каждый блок отдельно через WAVE. Elementor Pro с версии 3.15+ добавил настройки aria-атрибутов для виджетов, используйте их.

Можно, но потребуется больше ручной работы. Визуальные конструкторы склонны к нарушению иерархии заголовков и генерации избыточных div-обёрток. Проверяйте результат WAVE после каждого изменения. Elementor Pro (3.15+) позволяет задавать ARIA-атрибуты для виджетов — это частично решает проблему.

Как часто нужно перепроверять доступность сайта?

После каждого значимого обновления: новая тема, новый плагин, редизайн, крупная публикация контента. Минимальный цикл, раз в квартал запускать Lighthouse и проходить ключевые страницы с клавиатуры. Автоматический мониторинг через Accessibility Checker Pro оправдан для сайтов с регулярным контентом.

Минимум, после каждого крупного изменения (смена темы, новый плагин, редизайн) и раз в квартал профилактически. Для сайтов с регулярными публикациями оправдан автоматический мониторинг через Accessibility Checker Pro. Скринридерный тест достаточно проводить раз в полгода, если кодовая база не менялась.

Что делать с доступностью WordPress-сайта прямо сейчас

Не ждите идеального момента. WCAG 2.2 AAA, цель, а не старт. Начните с трёх действий сегодня:

• Запустите WAVE на главной странице. Исправьте красные ошибки (обычно 5-10 штук), они закрывают самые грубые барьеры.
• Пройдите сайт с клавиатуры. Tab, Tab, Tab. Застряли, чините. Не видно фокус, добавляете :focus-visible.
• Проверьте контраст трёх цветов: цвет текста, цвет кнопок, цвет ссылок. Доведите до 4.5:1.

Эти три шага, полчаса работы и львиная доля результата. Остальное, плагины, скринридеры, ARIA, добивайте постепенно.

Если сайт коммерческий и работает в ЕС, не откладывайте. EAA с 2025 года даёт надзорным органам реальные рычаги. Лучше встретить проверку с зелёным Lighthouse, чем с письмом от регулятора.