Доступність сайту на WordPress Привести до WCAG — без заміни теми й переписування сайту

Що в WordPress найчастіше ламає доступність

1. 01

   Тема

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

2. 02

   Конструктори сторінок

   Elementor, WPBakery і Divi збирають розмітку з однакових блоків: заголовки виходять не за порядком, а за розміром шрифту. Для екранного диктора структура сторінки при цьому зникає — він не може перейти «до наступного розділу».

3. 03

   Плагін доступності

   Кнопка-чоловічок у кутку змінює розмір тексту й кольори поверх сайту. Сам сайт вона не лагодить, але власнику здається, що питання закрите. Перевіряючий дивиться на код сторінки, а не на віджет.

4. 04

   Форми

   Contact Form 7, WPForms і форми Elementor за замовчуванням ставлять підказку всередину поля замість підпису. Підказка зникає під час введення, і людина з екранним диктором не знає, що саме заповнює.

5. 05

   Слайдери та спливні вікна

   Revolution Slider і попапи забирають фокус клавіатури й не віддають: з клавіатури зі сторінки не вийти. Автопрокрутка без кнопки «стоп» — окреме порушення.

6. 06

   Медіатека

   Зображення завантажують пачками, і поле alt лишається порожнім одразу в сотень файлів. Декоративним воно й не потрібне, а змістовним — обов’язкове, і відрізнити одне від одного може лише людина.

Як ми це виправляємо

1. 01

   Перевіряємо

   Автоматична перевірка плюс руки: прохід сторінкою лише з клавіатури, екранний диктор, збільшення до 200 %. Звіт — списком за важливістю, із зазначенням, де саме в темі чи плагіні лежить причина.

2. 02

   Правимо в дочірній темі

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

3. 03

   Налаштовуємо те, що налаштовується

   Підписи полів у формах, імена кнопок, порядок заголовків, кнопка «стоп» у слайдера, видимий фокус. Багато що в плагінах вмикається галочкою — просто про неї ніхто не знає.

4. 04

   Пишемо заяву

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

Чого ми не робимо

• Не ставимо плагін доступності замість роботи й не видаємо його за відповідність
• Не обіцяємо «повної відповідності»: частина вимог перевіряється лише людиною й залежить від вашого вмісту
• Не правимо файли купленої теми напряму — перше ж оновлення зітре правки
• Не чіпаємо зміст сторінок без вашої згоди: тексти й зображення ваші

Що залишиться на вашому боці

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

• Заповнювати alt у змістовних зображень одразу під час завантаження: потім їх сотні й уже не розібрати
• Ставити заголовки за порядком — H2, під ним H3, а не «той, що більший»
• Називати посилання за змістом: «умови роботи», а не «докладніше» й «читати далі»
• Не публікувати PDF без текстового шару — скан документа недоступний у принципі

Перевірте свій сайт просто зараз

Безкоштовна перевірка читає ту саму розмітку, що й перевіряючий: збільшення сторінки, імена кнопок, підписи полів, порядок заголовків, заява. Вона не замінює ручний аудит, але за десять секунд показує, з чого починати.