# data[].attributes.title
Доступний дизайн для культурних онлайн-проєктів

# data[].attributes.blurb.html
30 червня, з 16:00 до 17:30 за київським часом, Фонд ІЗОЛЯЦІЯ запрошує на онлайн-лекцію «Доступний дизайн для культурних онлайн-проєктів». На події культурні менеджери та менеджерки, а також всі, хто планує та втілює нові цифрові культурні продукти зможуть дізнатися про те як саме необхідно працювати з доступністю в інтернеті, щоб ними могло скористатися як можна більше людей.

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

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

Спікер Кіт Олійник — дизайнер, ментор, лідер дизайн-команд, спікер та винахідник з 20-річним досвідом. Працював з фінансовими установами та державними органами, надавав менторську підтримку понад 100 дизайнерів. Заснував некомерційну організацію, має чорний пояс з карате, батько трьох дітей.

Лекція відбувається в межах CTMP (The Cultural Transformation Movement Project) — чотирирічної ініціативи мережі Trans Europe Halles. Партнери: Brunnenpassage (Австрія), VIERNULVIER (Бельгія), Zo centro culture contemporanee (Італія) та IZOLYATSIA.

# data[].attributes.slidedeck.data[].slides[].desc.html
Доступність для тих, хто замовляє дизайн Воркшоп для «Ізоляції» Кіт Олійник · 30 червня 2026

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

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

# data[].attributes.slidedeck.data[].slides[].desc.html
Дизайн — не мистецтво. Дизайн розв’язує проблеми. Хороший дизайн заробляє або економить гроші. Найкращій — працює для всіх.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

# data[].attributes.slidedeck.data[].slides[].desc.html
ПИТАННЯ ТА ВІДПОВІДІ Твої питання Пиши в чат або вмикай мікрофон.

# data[].attributes.slidedeck.data[].slides[].desc.html
ЩО ПОЧИТАТИ І ПОДИВИТИСЬ Куди копати далі 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

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

# data[].relationships.data[].attributes.title
Доступний дизайн для культурних онлайн-проєктів