WordPress — найпоширеніша CMS у світі (43% всіх сайтів). Більшість українських бізнес-сайтів, блогів і новинних видань працюють на WordPress. На жаль, більшість WordPress-сайтів має суттєві проблеми з доступністю — через популярні теми та плагіни, що не враховують WCAG.
Хороша новина: WordPress має відносно хорошу базову доступність (ядро активно покращується починаючи з версії 5.x), а більшість проблем вирішується правильним вибором теми + кількома плагінами.
Факт: WordPress core team дотримується доступності як вимоги — всі офіційні теми з каталогу wordpress.org проходять базову accessibility review.
Вибір доступної теми
Це найважливіше рішення. Недоступна тема з десятками тисяч CSS-рядків — набагато складніша у виправленні, ніж правильна тема з нуля.
Критерії доступної теми:
Рекомендовані теми:
Безкоштовні (WordPress.org — Accessibility Ready):
- Twenty Twenty-Five — офіційна тема WordPress, доступна за замовчуванням
- Twenty Twenty-Four — block-based, добра підтримка доступності
- Neve — легка, доступна, добра для бізнес-сайтів
- Kadence — гнучка, активна accessibility підтримка
Що уникати:
- Теми з "mega menu" без клавіатурної підтримки
- Теми зі слайдерами без кнопки паузи
- Теми з каруселями на базі JS без ARIA
- Теми, де
outline: noneприбирається глобально
Перевірте перед покупкою:
# Встановіть тестову версію і перевірте:
# 1. Tab-навігація через всю сторінку
# 2. Видимість фокусу
# 3. Структуру заголовків (HeadingsMap extension)
# 4. Lighthouse Accessibility score
Плагіни для доступності
WP Accessibility (безкоштовний)
Автор: Joe Dolson (офіційний accessibility contributor WordPress) Встановлення: Plugins → Add New → "WP Accessibility"
Що додає:
- Skip-link якщо тема не має
- lang атрибут до HTML
- Видалення tabindex="0" з неінтерактивних елементів
- Виправлення focus стилів
- Додавання ролей до елементів навігації
Налаштування після встановлення:
- Settings → WP Accessibility
- Увімкніть "Add Skip Links" якщо тема не має
- Увімкніть "Force lang attribute"
- Увімкніть "Remove tabindex from divs/spans"
One Click Accessibility (безкоштовний)
Додає панель доступності на фронтенді: збільшення тексту, висока контрастність, greyscale, підкреслення посилань.
Попередження: Accessibility widgets не вирішують реальних проблем WCAG — вони є доповненням, а не заміною. "Overlay" плагіни, що заявляють "виправити всю доступність в один клік" — не відповідають дійсності.
AccessiBe, UserWay та інші "overlay" — критична примітка
Комерційні overlay-плагіни заявляють, що автоматично виправляють всі проблеми доступності. Це технічно неможливо:
- Вони не виправляють HTML-структуру
- Не виправляють логіку форм
- Не виправляють контраст (змінюють відображення, але порушення залишається)
- Їх використання не захищає від судових позовів
Рекомендація: Використовуйте overlay лише як доповнення до реального виправлення коду.
Налаштування alt-текстів
WordPress має вбудований інструмент для alt-текстів у медіабібліотеці.
Для нових зображень:
- Media → Add New
- У правій колонці → "Alt Text" — заповніть обов'язково
Для існуючих зображень:
- Media → Library
- Клікніть на зображення → "Alt Text"
У редакторі Gutenberg:
- Клікніть на зображення → в правій панелі "Alt Text"
Масовий аудит alt-текстів: Плагін Accessibility Checker (Equalize Digital) аналізує весь сайт і показує зображення без alt-тексту.
Правила alt-тексту для WordPress:
✅ Правильно:
- Статті: alt-текст описує зміст зображення
- Логотип: "Назва компанії — логотип"
- Декоративне розділення: порожній alt (залиште поле порожнім у WordPress)
- Зображення з текстом: повторіть текст у alt
❌ Неправильно:
- "image001.jpg"
- "photo"
- "Зображення"
- Порожнє поле для значущого зображення
А як ваш сайт виконує ці вимоги? Перевірте безкоштовно — кількість порушень за критичністю та інструкції з виправлення.
Навігація та меню
Проблема WordPress-меню: більшість тем реалізує dropdown-меню через CSS hover. Це не працює з клавіатурою.
Перевірка меню:
- Відкрийте сайт
- Tab до пункту меню з підменю
- Enter → підменю відкривається?
- Tab → можна переміщатись по підменю?
- Escape → підменю закривається?
Якщо ні — меню недоступне. Потрібна JS-доробка або зміна теми.
Мінімальний fix для Gutenberg Navigation block:
WordPress 6.x Navigation block має вбудовану клавіатурну підтримку — використовуйте його замість кастомних рішень.
Хлібні крихти (Breadcrumbs):
// Плагін Yoast SEO або Rank Math автоматично додає breadcrumbs
// Потрібно лише активувати у налаштуваннях і додати функцію в тему
// functions.php:
function mytheme_breadcrumb() {
if (function_exists('yoast_breadcrumb')) {
yoast_breadcrumb('<nav aria-label="Хлібні крихти"><p class="breadcrumbs">', '</p></nav>');
}
}
Форми (Contact Form 7, Gravity Forms)
Contact Form 7:
За замовчуванням CF7 не відповідає WCAG. Потрібно налаштувати:
<!-- У шаблоні форми CF7 — додавайте label перед полем -->
[label "Ваше ім'я (обов'язково)"][text* your-name][/label] [label "Email
(обов'язково)"][email* your-email][/label] [label "Повідомлення"][textarea
your-message][/label] [submit "Надіслати повідомлення"]
Плагін CF7 Accessible Defaults (безкоштовний) автоматично покращує доступність CF7.
Gravity Forms:
Gravity Forms краще підтримує доступність з коробки, але потребує налаштування:
- Settings → Accessibility → увімкніть "Enhanced Accessibility"
- Перевірте кожне поле на наявність label
- Налаштуйте повідомлення про помилки (не лише червоне обведення)
Перевірка та тестування
Базовий аудит WordPress-сайту:
- Автоматичний аудит: ЦМЦІ /scan або Accessibility Checker плагін
- Lighthouse: Chrome DevTools → Lighthouse → Accessibility
- WP Accessibility plugin: показує поширені проблеми в адмін-панелі
- Ручна перевірка: Tab-навігація, skip-link, zoom 200%
Equalize Digital Accessibility Checker — найкращий WordPress-плагін для аудиту:
- Аналізує кожен пост і сторінку
- Показує помилки прямо в редакторі
- Безкоштовна версія для 1 сайту