За час повномасштабної війни кількість людей з інвалідністю в Україні зросла на 300 тис. Всім їм потрібні не лише безбар'єрні вулиці, але й застосунки та сайти.
Якщо цифровий продукт інклюзивний, він доступний всім користувачам незалежно від їхніх можливостей. Щоб досягти цього, дизайнери використовують контрастні кольори, спрощують навігацію та ніколи не покладаються на один спосіб передачі інформації. Решта принципів та порад — у статті.
Ілюстрація Myroslava Samotii, студентки курсу «Ілюстрація. Basis»
Чому будь-який дизайн має бути інклюзивним
Досвід Microsoft каже, що інклюзивний дизайн потрібен не лише людям з інвалідністю. Наприклад, контрастні кольори важливі як для користувачів з порушеннями зору, так і для тих, хто зробив лазерну корекцію чи просто читає текст на телефоні під сонцем. Ось ще кілька обставин, за яких без інклюзивного інтерфейсу — ніяк:
Джерело: maze.co
85% юзерів залишають сайт, якщо їм не подобається його дизайн, а 40% — ніколи не повернуться, якщо їм було важко скористатися ним з першого разу.
У 2021 році в США подали понад 11 тис. позовів проти вебсайтів, що не відповідали вимогам інклюзивності. Якщо компанія нехтує доступним дизайном, вона як мінімум втрачає користувачів, як максимум — закінчує в суді.
Ілюстрація Myroslava Samotii, студентки курсу «Ілюстрація. Basis»
Базові принципи інклюзивного дизайну
Щоби перевірити, чи твій дизайн дійсно інклюзивний, скористайся рекомендаціями Web Content Accessibility Guidelines (WCAG). Ці міжнародні стандарти допомагають розробникам створювати доступні вебсайти й цифрові продукти.
WCAG базується на чотирьох принципах доступності, відомих як POUR: Perceivable (сприйнятний), Operable (працездатний), Understandable (зрозумілий) та Robust (надійний). Розповідаємо детально про кожен.
Ілюстрація Myroslava Samotii, студентки курсу «Ілюстрація. Basis»
#1. Perceivable (сприйнятний)
Цей принцип означає, що користувачі мають розуміти всі елементи дизайну. Більшість людей сприймає інформацію візуально. Але доступний дизайн має враховувати потреби тих, хто покладається на інші органи чуття — слух або дотик.
Колір не може бути єдиним способом передачі інформації, бо не всі сприймають його правильно. Зокрема зчитувачі екрана — програми, що розпізнають текст та озвучують його користувачу.
Наприклад, на картинці нижче неробочі посилання виділені червоним. Це очевидно для людини без порушень зору, але не для користувача, який використовує екранний зчитувач. Якщо твій дизайн передає інформацію кольором, обов’язково додавай альтернативний текст.
Джерело: venngage.com
Альтернативний текст — це текстовий опис нетекстового вмісту (іконок, зображень, інфографіки, діаграм, графіки). Без альтернативного тексту люди з порушеннями зору, які користуються екранними зчитувачами, не зможуть повноцінно сприймати сайт або застосунок.
Щоб створити якісний альтернативний текст, використовуй просту мову та активний стан, уникай зайвих слів («зображення…», «фото…»), а також обовʼязково закінчуй речення крапкою. Застосовуй альтернативний текст для візуального контенту, що передає важливу інформацію. Для декоративних зображень він не потрібен.
Також зверни увагу на контраст, тобто різницю в яскравості між елементом та його фоном. Дизайн з високою контрастністю полегшує сприйняття інформації. WCAG рекомендує коефіцієнти контрастності 4,5:1 для основного тексту і 3:1 для великого тексту.
#2. Operable (працездатний)
Поширена помилка в дизайні — вважати, що всі люди використовують мишу або тачпад.
Люди з обмеженими руховими функціями або тимчасовими травмами, як-от перелом руки, можуть не користуватися мишею. Тому важливо надати їм альтернативний спосіб навігації — наприклад, через клавіатуру.
Водночас користувачі клавіатури не повністю контролюють, в якому порядку інформація відображається на сторінці. Це не проблема для людей, які сприймають вміст візуально, — але екранні зчитувачі покладаються на теги в коді, щоб визначити правильний порядок читання. Наприклад, так вміст таблиці сприймає людина:
Джерело: venngage.com
А так — зчитувач з екрана, якщо не встановити правильний порядок читання в коді. Результат — вміст таблиці переплутається і здаватиметься людині нелогічним.
#3. Understandable (зрозумілий)
Вебсайт має бути простим у навігації та читанні. Щоб створити зрозумілий дизайн, зверни увагу на такі аспекти:
Візуальна ієрархія. Заголовки та підзаголовки мають структурувати інформацію в логічні розділи, як візуально, так і на рівні розмітки (тобто з використанням HTML-тегів для визначення ієрархії контенту).
Розмір шрифту. Як мінімум 2,2 млрд людей мають проблеми із зором. Це означає, що занадто малий шрифт робить сайт недоступним для них. Обирай кегль не менше ніж 16 пунктів.
Стиль шрифту. Вибір простих шрифтів, які легко бачити, читати й розуміти, — ще один принцип доступного дизайну. Краще обирати шрифти без засічок — вони мають чіткі лінії, тому їх легко читати. Проте деякі шрифти із засічками, як-от Times New Roman, також вважають доступними.
Поганий шрифт — той, в якому складно розрізнити літери. Читати його буде важко людям з дислексією або слабким зором.
#4. Robust (надійний)
Сайти мають бути доступними на різних інтерфейсах — так каже останній принцип POUR. Важливо, щоб користувач міг вручну обирати зручний для нього формат перегляду контенту.
Вебсайт ненадійний, якщо не працює в якомусь із популярних браузерів. Коли формат документа впливає на те, як він обробляється на різних пристроях, — це теж проблема. Змушувати користувача змінювати обрану технологію — поганий варіант. Краще знайти альтернативний спосіб представлення інформації.
Короткий гайд із розробки інклюзивного інтерфейсу
#1. Зроби дизайн адаптивним. Адаптивний дизайн враховує особливості різних пристроїв та правильно відображає сайт на будь-якому екрані — від ПК до смартфона. Адаптивні шаблони = узгодженість на всіх платформах. Завдяки їм можна легко перемикатися між сайтом і застосунком, використовуючи однакові функції та інтерфейс.
#2. Дозволь юзеру обирати. Важливо, щоб користувачу були доступні голосові команди, текстове введення, сенсорний екран, клавіатура та жести.
Наприклад, FaceID від Apple розблоковує пристрій, коли розпізнає обличчя власника. Але можна обрати й альтернативну функцію — пароль. А керувати мультимодальними інтерфейсами (як у гарнітурах VR/AR) можна за допомогою голосових команд, жестів та візуальних підказок. Плюс навігація з клавіатури — це простий, але важливий кейс мультимодальності.
Ілюстрація Myroslava Samotii, студентки курсу «Ілюстрація. Basis»
#3. Пропрацюй кольори та контрасти. Дальтонізм і колірна сліпота зустрічається в багатьох. Люди можуть як не розрізняти певні кольори, так і не бачити їх зовсім. Інклюзивний дизайн це враховує.
Забезпеч достатній контраст між текстом і фоном. Не використовуй колір як єдиний спосіб передачі інформації. Перевіряй, чи доступний твій дизайн користувачам із порушеннями зору (для цього є інструменти симуляції аномального сприйняття кольорів).
Приклад вдалої роботи з кольорами — Карти Google. В них є кілька функцій доступності — режим високої контрастності та індивідуальні колірні схеми. А застосунок надає детальні голосові підказки.
#4. Передбач навігацію та вміст. Зменшуй кількість візуальних елементів, які відвертають увагу. Це важливо для всіх, але насамперед — для нейродивергентних користувачів. Спрощений дизайн, менше анімацій та нейтральний фон допоможуть уникнути сенсорного перевантаження.
Наприклад, благодійна організація Autistica оптимізувала свій вебсайт для аутистичних людей — спростила макет, додала функцію «читати вголос» і субтитри для відео.
#5. Зроби інтерфейс сумісним із допоміжними пристроями. Наприклад, з:
- — екранними зчитувачами, як-от NVDA, JAWS або VoiceOver
- — клавіатурою, щоб зовсім не було потреби використовувати мишу (це важливо для людей з обмеженою рухливістю)
- — екранними лупами (як-от ZoomText): при збільшенні текст і графіка мають бути чіткими, а функціональність і контент — повністю збереженими
- — голосовими асистентами, як-от Dragon NaturallySpeaking