Доступність сайту за WCAG: чому це вже вимога донорів і освітніх установ

WCAG (Web Content Accessibility Guidelines) — це, якщо просто, світовий звід правил, які роблять сайти зручними для абсолютно всіх людей, включаючи тих, у кого є інвалідність.

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

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

Чотири правила WCAG, або принцип POUR

Усі фішки WCAG діляться на чотири прості літери. Запам’ятати легко — POUR (з англійської «лити», ніби заливаємо доступність у код):

P — Сприйняття (Perceivable). Контент мають бачити й чути всі. Якщо є картинка — має бути й текст, який її описує (alt-текст). Якщо є відео — додавай субтитри.

O — Керування (Operable). Сайт не повинен глючити, якщо ти прибрав мишку. Усе має клікатися і перемикатися звичайною клавіатурою — наприклад, кнопкою Tab.

U — Розуміння (Understandable). Текст має бути простим, а не написаним мовою підручника з філософії. Навігація — передбачуваною: якщо тиснути «Назад», маєш повернутися назад, а не на головну.

R — Надійність (Robust). Сайт повинен стабільно відкриватися на будь-якому залізі: від старого компа до останнього айфона чи екранного диктора (скрінрідера) для незрячих.

Навіщо це взагалі треба?

Робити сайт за WCAG — це не просто «бути добряком». Це вигідно:

Google це любить. Пошукові роботи «читають» код сайту так само, як незрячі люди через скрінрідер. Чистий, доступний код піднімає сайт у пошуку.

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

Без штрафів. У багатьох країнах, якщо сайт коледжу чи держструктури недоступний для людей з інвалідністю, за це можна отримати цілком реальний штраф.

Це вже не побажання, а вимога

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

Донори. УКФ, USAID, програми ЄС дедалі частіше прописують WCAG прямо в умовах гранту — і перевіряють це на аудиті так само уважно, як логотипи чи звітність. Недоступний сайт може стати причиною зауважень навіть тоді, коли весь інший функціонал працює бездоганно.

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

Тобто доступність — це більше не «зробимо, якщо буде час». Це такий самий обов’язковий пункт приймання роботи, як робочі форми чи коректна верстка на мобільному.

Кейс: як ми зробили сайт коледжу доступним

Один із прикладів — сайт коледжу, який готувався до інклюзивного набору студентів. Спочатку команда сприймала доступність як «додамо в кінці, якщо встигнемо». Але вже після першого прогону через автоматичний аудитор і ручну перевірку клавіатурою список зауважень виявився довшим, ніж очікували.

Контраст і шрифт. Світло-сірий текст на білому фоні виглядав стильно, але не проходив мінімальний контраст 4.5:1. Замінили палітру на темніші відтінки й додали можливість збільшити шрифт без «розповзання» верстки.

Alt-текст для кожного зображення. Половина фото не мала опису — для скрінрідера це просто «картинка, картинка, картинка» без сенсу. Прописали змістовний alt для кожного фото, а декоративні елементи позначили як порожні, щоб не засмічувати озвучення.

Навігація з клавіатури. Випадаюче меню й форма вступу відкривалися тільки по кліку мишкою. Додали видиму рамку фокуса та порядок табуляції, щоб усе — від меню до кнопки «Подати заявку» — працювало на Tab і Enter.

Відео з субтитрами. Ролик про студентське життя був без жодного текстового супроводу. Додали субтитри й текстову розшифровку під плеєром.

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

Якщо готуєте сайт до грантового аудиту чи набору студентів — доступність варто перевірити заздалегідь, а не чекати, поки на це вкаже експерт чи абітурієнт, який просто не зміг залишити заявку.