А ви знали, що 15% людей із важкими формами інвалідності користуються інтернетом щодня? Серед них найбільший відсоток — це молодь віком від 15 до 29 років. Хочете дізнатись, як виглядає інтернет для них? Встановіть на свій комп’ютер програму VoiceOver і спробуйте щось знайти, написати лист або замовити товар.
Сьогодні перед дизайном постають дві нові задачі: інклюзивність та доступність. Але їх не слід плутати або підміняти одне одним.
Давайте розберемося, у чому різниця між інклюзивним і доступним дизайном
Доступний дизайн передбачає просту і пряму взаємодію користувача з інтерфейсом. Інклюзивний дизайн же орієнтований на потреби людей з обмеженими можливостями.
Звичайний дизайн створюється для «середнього» користувача (якого насправді не існує). Саме тому навіть ми іноді стикаємося з типовими труднощами при взаємодії з інтерфейсами. А тепер уявімо, наскільки складнішим цей процес є для людей з інвалідністю.
20 років тому незалежне федеральне агентство США ADA створило Посібник з доступності вебконтенту (WCAG) . Цей документ регулярно оновлюється і є непорушним зводом правил для створення інклюзивного дизайну.
Основні принципи WCAG
Почнемо з кольору
У цьому випадку процес проєктування сайту має базуватись передусім на турботі про користувача та зручності використання — і вже потім на візуальній досконалості. Не забувайте, що більшість користувачів переглядають сайти з мобільних пристроїв, а це означає, що всі елементи мають бути достатньо контрастними, особливо при яскравому сонячному світлі.
Робота з сайтом для людини з дальтонізмом значно відрізняється від звичного користування. Типові кольорові поєднання без додаткових візуальних підказок можуть бути для неї просто незрозумілими.
Щоб поставити себе на місце користувача, скористайтеся сервісом Coblis . Він дозволяє змоделювати сприйняття кольорів у вебі, як у людини з дальтонізмом.
Дуже важливо надати користувачу можливість самостійно налаштовувати вигляд сторінки. Найпростіше — дати три варіанти кольорової схеми. Більш просунутий варіант — індивідуальні налаштування кольору кнопок, фону, тексту та навіть посилань.
Щоб передати важливу інформацію, завжди додавайте текстові підказки. Наприклад, якщо форма підсвічена червоним, обов’язково додайте попереджувальний напис.
Медіафайли
Вашим сайтом можуть користуватись не лише люди з проблемами зору, але й незрячі. Такі користувачі сприймають інформацію за допомогою спеціальних програм — скрінрідерів (назва говорить сама за себе).
Текст
Ось так бачать текст люди з дислексією. Ваше головне завдання — спростити сприйняття будь-якої текстової інформації для них.
І ще кілька очевидних порад: уникайте курсиву, довгих слів, розривів рядків та складних конструкцій у реченнях.
І ще трохи про сприйняття змісту. Ви маєте бути впевнені, що ваш текст буде правильно зрозумілий. Для цього оцініть його за індексом туманності Ганнінга. Це тест, що визначає читабельність і зрозумілість будь-якого тексту.
Керування
Для людей з порушенням опорно-рухового апарату може бути дуже складно або неможливо активно переміщуватись сайтом за допомогою миші. Тому важливо додати повну підтримку керування з клавіатури.
Навігація
Забудьте про приховані елементи навігації.
Приберіть приховані навігаційні блоки. Якщо ви хочете, щоб користувач помічав важливі елементи, не ховайте їх. Натомість виділяйте функції та посилання, які повинні бути помітні для скрінрідерів.
Ще один важливий момент: не забувайте про правильну розмітку — теги перед заголовками, списками, таблицями та іншими важливими елементами при верстці сторінки.
Ці рекомендації — лише верхівка айсберга у створенні зручної цифрової екосистеми для людей з інвалідністю. Уявіть, що ви маєте можливість зробити життя людей, які щодня стикаються з дискримінацією, хоча б трохи простішим. Інклюзивний дизайн — це двері у світ без бар’єрів.
Про те, як створювати справді складні дизайни навіть без досвіду, ми розповідаємо на нашому курсі «Веб-дизайнер: Щасливий Квиток до Таїланду».