Доступний дизайн для культурних онлайн-проєктів

Доступність для тих, хто замовляє дизайн Воркшоп для «Ізоляції» Кіт Олійник · 30 червня 2026

ПРО ЩО СЬОГОДНІ Маршрут на 90 хвилин Що таке доступність і навіщо це тобі Аудиторії та їхні потреби WCAG: рівні, принципи, чотири напрямки Окремо для України: ПТСД, війна, реальність На що дивитись, коли замовляєш Три перевірки, які зробиш сам сьогодні ввечері

ВСТУП · ПРО МЕНЕ Я з родини архітекторів. Двадцять років роблю цифровий дизайн, десять з них — в США. Обидва батьки — архітектори, мама — віце-президентка Спілки Архітекторів України. Я виріс там, де будівля — це не цегла, а система: світло, вода, лінії зору, де людина пройде, а де навернеться. Також керую фондом Sweetanok: допомагаємо фронту та відбудовуємо школу в Миколаєві. Архітектор кладе пандус не з доброти. А тому, що інакше будівля не працює для частини людей.

Дизайн — не мистецтво. Дизайн розв’язує проблеми. Хороший дизайн заробляє або економить гроші. Найкращій — працює для всіх.

ЩО ТАКЕ ДОСТУПНІСТЬ Коли твоїм продуктом можуть користуватися всі. Погано бачить або незрячий Вади слуху або з контузією Тремтять руки або нема пальців Тримає дитину або нема руки Слухає сайт голосом або збільшує шрифт Відео без субтитрів для нього не існує Керує клавіатурою або голосом. Гортає твій сайт однією рукою.

НАВІЩО ЦЕ ТОБІ Ти замовляєш продукт — це твоя зона відповідальності. Брак — твоя проблема Розробник зробив, що сказали Здаєш сайт, яким не може користуватись частина людей — здаєш брак. Дізнаєшся не від розробника. Від користувача, злого допису або в суді. Він може й винен, але це ти не вписав вимогу. На старті це копійка, переробити в кінці буде втричі дорожче.

В УКРАЇНІ ЦЕ ВЖЕ ЗАКОН ДСТУ EN 301 549 Збудований на міжнародних правилах WCAG З липня 2023 обов’язковий для всіх держсайтів У роботі закон, що поширює вимоги на приватний сектор (вектор ЄС) Дотичний до держави, гранту чи ЄС? 
 Доступність уже не «добра воля». Це вимога.

УКРАЇНА, ТРАВЕНЬ 2026 два мільойни ветеранів Близько 100 000 — після ампутацій. Не статистика з чужої країни. Це твоя завтрашня аудиторія і твої колеги. 
 Війна зробила доступність в Україні не абстрактним добром, а арифметикою.

ХОРОША НОВИНА Ефект скошеного бордюру Зробили для меншості — виграли всі. Бордюр для візочників Субтитри для тих, хто не чує Контраст для слабкозорих Користуються батьки з колясками, кур’єри, ти з валізою Вмикає півкраїни в метро без навушників Дякує кожен, хто відкрив сайт на сонці Один пандус — і ним користуються всі, хто проходить повз. 
 А ще субтитри індексує Google та бачить AI. Безкоштовне SEO, на яке не було бюджету.

АУДИТОРІЇ ТА ЇХНІ ПОТРЕБИ Одна потреба. Три людини. Модель Microsoft: обмеження бувають постійні, тимчасові й ситуативні. ПОСТІЙНЕ ТИМЧАСОВЕ СИТУАТИВНЕ Людина без руки Зламана рука в гіпсі Мама з немовлям на руці У всіх трьох — одна потреба: одна вільна рука.
 Зробив для однієї людини — обслужив трьох. Безкоштовно.

ТВІЙ ЧЕК-ЛИСТ Чотири питання до макета Як це побачать? Як це почують? Як цим керувати? Як це сприймати? Не бачать, бачать погано, не розрізняють кольорів. Відео й аудіо без тексту не існують. Тільки клавіатура. Тремор. Малі кнопки. Складна мова, мерехтіння, плутанина.

WCAG · СТАНДАРТ WCAG 2.2 — правила доступності. Один документ, на якому тримаються і ДСТУ, і європейський закон Актуальна версія — 2.2 (2023). Торік стала ще й стандартом ISO Чутки про 3.0? Будуть років за два. Не чекай — поки доробиться, ти вже здаси десять проєктів. Тобі не треба читати WCAG. Серйозно. Це робота підрядника

A · AA · AAA РІВНІ WCAG A AA AAA Без цього зовсім погано Вимагає закон і здоровий глузд Рідко доходять повністю Мінімум «WCAG 2.2, рівень AA»
 Робочий рівень Чарівна фраза для будь-якого ТЗ. Ідеал

ЧОТИРИ ПРИНЦИПИ Принцип pour — наливай. Perceivable Operable Не бачиш — почуй. Не чуєш — прочитай. Усім можна керувати. Не лише мишкою. Сприйнятність Керованість Understandable Robust Зрозуміло й передбачувано, що відбувається. Працює з допоміжними технологіями. Зрозумілість Надійність

WC AG Н А П РА К Т И Ц І Хто погано бачить Alt-текст до кожного зображення — голос його прочитає Достатній контраст тексту і фону (є безкоштовні перевірялки) Колір не єдиний носій сенсу: червоним І значком Шрифт масштабується і не ламає верстку Фото без опису для незрячого не існує
 Для будь-якої публікації або фотоархіву alt-текст критичний.

WC AG Н А П РА К Т И Ц І Хто не чує Субтитри до кожного відео Транскрипт (текстова версія) до аудіо — подкастів, аудіогідів Бонус: текст індексується Google та AI. Знову скошений бордюр. Аудіогід без тексту — це екскурсія пошепки.

WC AG Н А П РА К Т И Ц І Проблеми з моторикою Усе працює з клавіатури, без миші Видно, на якому елементі зараз фокус (рамка навколо кнопки) Клікабельні зони великі, не впритул одна до одної Кнопки впритул — це не «компактно».
 Це мінне поле для товстих пальців.

WC AG Н А П РА К Т И Ц І Кому складно сприймати Проста мова. Коротко. Без канцеляриту. Зрозуміла, послідовна навігація Жодного автомерехтіння і різких спалахів Раптовий спалах чи звук б’є по нервах.
 Запитай будь-кого, хто здригається від звуку мотоцикла, схожого на „шахед”.

ОКРЕМО ДЛЯ УКРАЇНИ ПТСД — це теж доступність. Посттравматичний стрес зараз і у ветеранів, і у цивільних. Твій інтерфейс може зробити гірше за секунду. Жодних раптових гучних звуків — відео не вмикається само Жодної несподіваної анімації, спалахів, різких переходів Темпом керує користувач. Нічого не вистрибує саме WCAG це теж вимагає.
 Але тут це не пункт стандарту. Це повага.

ЕРГОНОМІКА, ШИРША ЗА МИШКУ Не всі тримають мишку. Під одну руку Керування голосом Екранний читач Великі зони, нічого впритул. Працює і для мами з дитиною, і для ветерана з протезом. «Натисни Відкрити» спрацює, лише якщо кнопка зветься «Відкрити» — і на екрані, і в коді. Інакше голос розмовляє зі стіною. Сайт читається згори вниз логічно, заголовки структуровані, кожна картинка має опис.

ОСОБИСТИЙ КЕЙС dreamland.rocks: гра для незрячих Текстова багатокористувацька гра, яку я співрозробляю роками. 
 Жодної графіки — і саме тому в неї грають незрячі люди: екранний читач читає все. Текст — найдоступніший інтерфейс на світі. Його читає будь-що, навіть розумні холодильники. Progressive disclosure: на екрані тільки 100% необхідне Завжди є шлях «далі»: деталі, більше, контекст Не вивалюй усе відразу.
 Для будь-якого сайту спочатку покажи суть, і дай кнопку копнути глибше.

НАПЕРЕД: AI ЯК ШАР ДОСТУПНОСТІ MCP-шар: швидкий підсумок поверх вмісту Поверх архіву кладеш розумний шар, який на запит видає суть: «про що це», «знайди X». Зручно і незрячому, і просто зайнятому. Що дає замовнику Що закласти в проєкт Людина не мусить читати 200 сторінок. Питає — отримує суть. Текст читається будь-чим. Структуровані дані й чистий текст, не картинки тексту. Це питання до підрядника вже сьогодні.

З МОГО ДОСВІДУ · УРЯД США (VA) WCAG vs Section 508: хто кому батько Я будував доступні дизайн-системи для Міністерства ветеранів США. Там за недоступність не сваряться — там судяться. WCAG — це «ЯК» 508 — це «МУСИШ» Технічний стандарт: контраст, alt, клавіатура. Міжнародний. Сам нікого ні до чого не зобов’язує. Закон США (1973, оновлений 2018). Зробив WCAG 2.0 AA обов’язковим. Сам критеріїв не вигадує. ДСТУ = «мусиш»
 Усередині — той самий WCAG. США, ЄС, Україна — одна логіка.

НА ЩО ДИВИТИСЬ · ЕТАП 1 На старті — у технічному завданні Впиши рядок: «Продукт відповідає WCAG 2.2, рівень AA». Нуль гривень на старті. Заклади це в бюджет і строки одразу, а не «прикрутимо в кінці» Попроси підрядника описати, як він це забезпечить і перевірятиме Порожні очі у відповідь? Це теж відповідь.

НА ЩО ДИВИТИСЬ · ЕТАПИ 2–3 Як приймати роботу Поки робиться Перед прийманням Проси показувати не тільки «як гарно», а як працює з клавіатури й читача — на дзвінку.

Не вір на слово — проси звіт (audit).

Для архівів: хто пише alt-тексти до тисяч фото? Плануй, не «потім». Зроби 3 перевірки сам. Дай потестити людині з екранним читачем. Найчесніший тест.

ЧЕРВОНІ ПРАПОРЦІ У ПІДРЯДНИКА Почуєш таке — насторожись. «Доступність? Та хто тим користується» «Додамо в кінці, це легко» (не легко, і не додасться) «У нас сучасний дизайн, там усе доступне за замовчуванням» «Сучасний дизайн за замовчуванням доступний»
 Приблизно як новий автомобіль — за замовчуванням заправлений.

ПРАКТИЧНІ ПРИКЛАДИ Три перевірки. Сьогодні ввечері. Без жодного рядка коду. Клавіатура Контраст Картинки/відео Tab по сайту, без миші WebAIM Contrast Checker Alt-тексти й субтитри

ТЕСТ 1 · КЛАВІАТУРА Забери руку з миші. Тисни Tab. Фокус має стрибати по посиланнях і кнопках — і ти маєш бачити, де він Дійди Tab’ом до головної дії (відкрити документ) і натисни Enter Не доїхав або не видно фокуса? Людина без миші щойно не змогла Це провал на рівні A — найгрубіший.

ТЕСТ 2 · КОНТРАСТ WebAIM Contrast Checker Безкоштовний. Візьми колір тексту і колір фону Він скаже «pass» або «fail» для рівня AA Світло-сірий текст на білому, який так люблять дизайнери — майже завжди fail Світло-сірий на білому = fail Темний на світлому = pass

ТЕСТ 3 · КАРТИНКИ І ВІДЕО Порахуй, скількох описів бракує Кожне змістовне зображення має alt-текст? Кожне відео має субтитри? Архів на 1000 фото без описів = 1000 порожніх місць для незрячого Питаєш хоча б це — ти вже замовник, з яким рахуються.

ПИТАННЯ ТОБІ Який твій найближчий проєкт — сайт, архів, база, виставка? Як гадаєш — він пройде тест із клавіатурою? Кинь одним словом у чат.

ПИТАННЯ ТА ВІДПОВІДІ Твої питання Пиши в чат або вмикай мікрофон.

ЩО ПОЧИТАТИ І ПОДИВИТИСЬ Куди копати далі WCAG українською cmci.org.ua w3.org/Translations/WCAG21-uk Центр моніторингу цифрової інклюзії WebAIM Contrast Checker MS Inclusive Design Toolkit webaim.org/resources/contrastchecker inclusive.microsoft.design The A11y Project Checklist a11yproject.com/checklist

Твій сайт — це будівля. Зроби в ньому пандус. Не з доброти. Бо інакше він не працює — а ти за нього заплатив. Кіт Олійник letsdesign.it · LinkedIn /in/fiorine · Приходь ще.