How to Make Your WordPress Site Accessible: 2026 Guide

WordPress — найпопулярніша CMS у світі: на ній працює понад 43% усіх сайтів в інтернеті. Це означає, що рішення щодо доступності в WordPress безпосередньо впливають на мільярди людей. Проте, незважаючи на офіційну команду доступності WordPress та стандарти WCAG, переважна більшість сайтів на WordPress все ще мають серйозні проблеми з доступністю.

Причини різні: теми, що не відповідають стандартам, плагіни з недоступними компонентами, неправильне використання редактора Gutenberg або просто брак знань. У цьому посібнику ми крок за кроком розглянемо, як зробити WordPress-сайт доступним — від вибору теми до налаштування контрасту та інтеграції з InclusiveWeb.

Accessibility-ready теми WordPress

Перший крок до доступного WordPress-сайту — правильний вибір теми. Це фундамент, і помилка тут коштує дорого: виправляти проблеми доступності у базовій структурі теми набагато важче, ніж обрати правильну з самого початку.

Що означає "accessibility-ready" тема

WordPress.org має офіційний тег «accessibility-ready» для тем, що пройшли перевірку командою доступності. Такі теми повинні відповідати базовому набору вимог: клавіатурна навігація, правильне використання заголовків, видимий фокус-індикатор, достатній контраст кольорів та коректна робота зі скрінрідерами.

Важливо розуміти: тег «accessibility-ready» означає базову відповідність, але не гарантує повного дотримання WCAG 2.1 AA. Кастомізація теми та доданий контент можуть знову порушити доступність. Тому тему потрібно тестувати після будь-яких змін.

Рекомендовані теми

Twenty Twenty-Four — офіційна тема WordPress 2024, розроблена командою Automattic з урахуванням доступності. Підтримує Full Site Editing (FSE), має тег «accessibility-ready», побудована на семантичному HTML5. Відмінний вибір для нових сайтів.

Astra — одна з найпопулярніших легких тем. Має accessibility-ready тег, підтримує WCAG 2.1, оптимізована для швидкості. Широко використовується з Elementor та іншими page builders. Є безкоштовна та Pro-версія.

GeneratePress — мінімалістична тема, відома своєю швидкістю та чистим кодом. Accessibility-ready, коректно підтримує клавіатурну навігацію та screen readers. Підходить для блогів і корпоративних сайтів.

Neve — сучасна адаптивна тема від ThemeIsle з тегом accessibility-ready. Добре інтегрується з Gutenberg та популярними page builders. Має вбудовані налаштування кольорів та типографіки з перевіркою контрасту.

Що перевіряти при виборі теми

• Наявність тегу «accessibility-ready» у репозиторії WordPress.org
• Видимий фокус-індикатор для всіх інтерактивних елементів (перевірте Tab-навігацію)
• Коректний контраст кольорів у дефолтній схемі (перевірте в WebAIM Contrast Checker)
• Семантичний HTML: наявність <main>, <nav>, <header>, <footer>
• Skip navigation link («Перейти до основного контенту») для клавіатурних користувачів
• Адаптивний дизайн без блокування масштабування (meta viewport без user-scalable=no)

Кращі плагіни доступності для WordPress

Плагіни можуть суттєво допомогти з доступністю, але важливо розуміти їх обмеження: жоден плагін не може замінити якісно побудований сайт. Плагіни-оверлеї можуть навіть погіршити ситуацію для реальних користувачів скрінрідерів.

Ручні виправлення в WordPress

Навіть найкраща тема і плагіни не замінять правильного підходу при створенні контенту. Більшість WCAG-помилок на WordPress-сайтах виникають саме через неправильне використання редактора.

Зображення та alt-text у блоці Gutenberg

Коли ви додаєте зображення в Gutenberg, у правій панелі є поле «Альтернативний текст». Заповнюйте його для кожного смислового зображення. Якщо зображення суто декоративне (наприклад, фоновий патерн), залиште поле порожнім і поставте галочку «Зображення є декоративним» — WordPress додасть alt="" автоматично.

Типові помилки: alt-текст типу «зображення», «фото», назва файлу (image001.jpg) або взагалі відсутній alt. Хороший alt — коротке описове речення, що передає сенс зображення в контексті сторінки.

Посилання та їх описові назви

Уникайте посилань з текстом «тут», «натисніть», «докладніше» без контексту. Користувачі скрінрідерів часто переглядають список усіх посилань на сторінці — і «тут» нічого не означає поза контекстом.

1. 1Виділіть осмислений текст перед тим, як зробити з нього посилання: «Завантажте наш безкоштовний посібник з доступності» замість «завантажте тут»
2. 2Якщо посилання відкривається в новому вікні — попередьте про це в тексті або через aria-label: «(відкриється в новому вікні)»
3. 3Для іконок-посилань без тексту (соціальні мережі) додавайте aria-label у HTML або використовуйте плагіни, що роблять це автоматично

Заголовки та структура контенту в редакторі

Gutenberg має блок «Заголовок» з вибором рівня (H1–H6). Правила прості: H1 — тільки один на сторінці (зазвичай це назва запису/сторінки, яку WordPress додає автоматично). У тілі статті використовуйте H2 для основних розділів, H3 для підрозділів, H4 для вкладених підрозділів.

Поширена помилка: використання заголовків лише для стилізації (хочу великий жирний текст, тому ставлю H2). Для стилізації використовуйте CSS-класи або блок «Параграф» із кастомними стилями.

Налаштування кольорів у темі (contrast)

Більшість сучасних тем WordPress дозволяють змінювати кольори через Customizer або FSE. При зміні кольорів завжди перевіряйте контраст за допомогою WebAIM Contrast Checker. Вимога WCAG 2.1 AA: мінімальний коефіцієнт контрасту 4.5:1 для звичайного тексту і 3:1 для великого тексту (18pt+ або 14pt+ жирний).

Особливо уважно перевіряйте: текст на кольоровому фоні, placeholder-текст у формах, текст на зображеннях (hero banner), кольорові кнопки.

Gutenberg і доступність

Gutenberg (блоковий редактор WordPress) активно розвивається з точки зору доступності. Починаючи з WordPress 6.1, більшість стандартних блоків пройшли accessibility audit. Однак є нюанси:

• Блок «Таблиця»: обов'язково додавайте заголовки рядків/стовпців у налаштуваннях блоку — вони додають scope="col"/scope="row"
• Блок «Медіа та текст»: завжди заповнюйте alt-текст зображення
• Блок «Кнопка»: переконайтесь, що текст кнопки є описовим, а не «Натисніть» чи «OK»
• Блок «Відео»/«Аудіо»: Gutenberg не додає субтитри автоматично — завантажуйте .vtt файл субтитрів або додавайте транскрипт
• Сторонні блоки: блоки від сторонніх плагінів можуть мати власні проблеми доступності — тестуйте їх окремо

WooCommerce доступність

WooCommerce — найпоширеніший e-commerce плагін для WordPress. Доступність інтернет-магазину особливо важлива: люди з інвалідністю повинні мати рівний доступ до купівлі товарів. Специфічні вимоги для WooCommerce:

1. 1Сторінка товару: зображення товарів повинні мати описові alt-тексти; галерея зображень повинна бути клавіатурно доступною
2. 2Форма оформлення замовлення: всі поля повинні мати <label>; помилки валідації мають бути озвучені скрінрідерам (aria-live)
3. 3Кнопка «Додати в кошик»: якщо на сторінці кілька товарів, кнопки повинні мати унікальні описи (наприклад, через aria-label «Додати iPhone 15 в кошик»)
4. 4Фільтри та сортування: мають бути доступні з клавіатури; зміна результатів повинна анонсуватись через aria-live
5. 5Popup та modal вікна (наприклад, мінікошик): повинні відповідати ARIA dialog pattern — focus trap, Escape для закриття, повернення фокусу при закритті

InclusiveWeb + WordPress

InclusiveWeb пропонує два способи інтеграції з WordPress, що не потребують технічних знань:

Варіант 1: DNS-проксі (без змін у коді)

Найпростіший спосіб: налаштуйте CNAME-запис у вашому DNS-провайдері. Весь трафік сайту проходить через InclusiveWeb-проксі, який автоматично виправляє HTML перед відправкою браузеру. Жодних змін у WordPress, жодних плагінів — лише один DNS-запис.

Варіант 2: 1 рядок JavaScript

Додайте один рядок коду у functions.php вашої теми або через плагін «Insert Headers and Footers»:

<script src="https://cdn.inclusiveweb.net/iw.js" async></script>

Що InclusiveWeb виправляє автоматично

• Відсутні alt-тексти (генерує описи за допомогою AI на основі контексту сторінки)
• Відсутні label для елементів форм
• Недостатній контраст кольорів (попереджає і пропонує виправлення)
• Відсутній атрибут lang на <html>
• Недоступні посилання та кнопки без описових назв
• Проблеми зі структурою заголовків