Гараж

Інтерфейс для всіх. Чому варто зробити свій цифровий продукт інклюзивним

Інклюзивний дизайн потрохи стає трендом в США та Європі, проте в Україні такої популярності ще не набув. Зокрема через нерозуміння що власне значить «інклюзивність» в дизайні цифрових продуктів, що вона може дати бізнесу, а також через міфи на кшталт «це дорого» та «це некрасиво».

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

Що таке інклюзивний дизайн

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

Інклюзивність у дизайні націлена на те, щоб не створювати будь-яких бар'єрів (або хоча б максимально зменшити їх кількість) для користування продуктом.

Важливо уточнити, що поняття «інклюзії» може застосовуватися й до фізичних, й до цифрових продуктів. Проте конкретно зараз зосередимося на других.

Кому та чому він потрібний

Для більшої наочності звернемося до цифр. Коли ми говоримо про людей з інвалідністю чи певними порушеннями, то маємо на увазі від 15% до 20% населення планети.

Типів інвалідності та порушень існує багато. Ось основні з них, на які варто звертати увагу при створенні інтерфейсу:
1
Проблеми з зором: порушення, сліпота, колірна сліпота.
2
Проблеми зі слухом: порушення, глухота.
3
Когнітивні проблеми: порушення логіки, пам'яті, здатності навчатися тощо, які впливають на розуміння й ускладнюють навігацію по сайтах.
4
Порушення моторики: ускладнює змахування, доторк або натискання на певні елементи; неможливість користуватися руками.
5
Проблеми з вимовою, що можуть ускладнити роботу з голосовим дизайном користувальницького інтерфейсу.
Крім того, не варто думати, що йдеться тільки про постійний фізичний стан. Людині, яка зламала руку, буду набагато простіше користуватися вашим продуктом, якщо він оптимізований для керування однією рукою. Людині, що їде в потязі чи метро, може бути простіше прослухати, а не прочитати текст.

Чому інклюзивність — це зручно для всіх

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

Проте коли справа стосується фінансової частини, то тут необхідні більш прагматичні причини аби пояснити бізнесові, чому він теж зацікавлений в інклюзивності свого продукту.
Згадаємо про статистику — від 15% до 20% людей мають певні порушення чи інвалідність. Тобто близько п'ятої частини всього населення. Ігнорувати це було б дивно. Що з моральних, що з прагматичних причин. Ці всі люди — ваша потенційна аудиторія, яку ви втрачаєте.
Ви підвищите лояльність аудиторії. По-перше, якщо ваш продукт буде інклюзивним, то вже виділятиметься на тлі конкурентів. По-друге, це привабить не тільки користувачів, для яких доступний дизайн — необхідність, а й тих, хто просто розділяє такі ж цінності.
Створивши дизайн систему, ви можете її використовувати і для вебсайту, і для застосунку, і для інших своїх цифрових продуктів.
Попри поширений міф, це жодним чином не зробить UI-складову нудною чи некрасивою.
Доступний інтерфейс — це не просто доступність для людей з порушеннями, це про доступність і зручність для всіх. Навряд людина зі 100-відсотковим зором буде проти, якщо кольори в дизайні будуть більш контрастними або інтерфейс буде оптимізованим під користування однією рукою.
Скриншот сайту Web Content Accessibility Guidelines (WCAG)

Де знайти стандарти вебдоступності

Найбільш відомі та авторитетні стандарти — Web Content Accessibility Guidelines (WCAG). Їх створив Тім Бернерс-Лі, який, крім іншого, ще й винайшов інтернет.

Бернес-Лі також заснував організацію World Wide Web Consortium, багато займалася тестуванням разом із людьми з різними, зокрема тимчасовими, неспроможностями. І на цій базі й були сформовані списки рекомендацій.

Як дізнатися, наскільки ваш інтерфейс доступний

Нижче ділимося кількома корисними інструментами, що допоможуть перевірити ваш продукт на відповідність різним аспектам доступності.

WAVE. Для перевірки достатньо вказати адресу вебсайту. Далі застосунок все аналізує та видає позначки з проблемними місцями прямо на елементах інтерфейсу. Також існує додаток для браузера Google Chrome.

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

AChecker. Тут теж можна додати адресу сайту, але крім цього
є можливість завантажити свій HTML. Звіт доволі технічний — там зазначені рядки коду, де є помилки. Його можна завантажити у PDF, проте трохи складно зіставляти з інтерфейсом, який ми бачимо на екрані.

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

Aditus. Button Contrast Checker. Кнопки — це важливий компонент і на них, як правило, зав'язані ключові функції. Ви отримаєте відтінки та коди кольорів, що використовуються у кнопках. А також результат щодо їх контрастності.

Color Contrast Analyzer. Це плагін для Google Chrome. Ви можете зайти на сайт і далі або обрати всю сторінку, або виділити конкретну зону, яку хочете проаналізувати. На відміну від попередніх інструментів, цей аналізує ще й елементи картинки.

MAUVE++. Ви можете додати адресу сайту, що вас цікавить та перевірити його. Проте з можливістю обрати за якою жорсткістю вимог стандарту ви перевіряєте. Крім того сервіс вводить свій рейтинг доступності для сайту.

ARC Toolkit. Цей інструмент вбудовується в сам браузер і його можна
знайти в переліку інструментів для розробника. Це дає можливість обробляти великі масиви інформації, доволі важкі серйозні сайти.
Ще кілька порад, як перевірити дизайн сайту або застосунку на інклюзивність, ми зібрали в окремому матеріалі.

Як зробити свій інтерфейс інклюзивним

Детальніше заглибитися у суть та принципи інклюзивного дизайну допоможе наш безкоштовний відеокурс Inclusive Web Design. Після перегляду якого ви дізнаєтеся про особливості зору людини, поняття та приклади вебдоступності та інклюзивного дизайну, історію стандартів у сфері доступності, вимоги до дизайну цифрових продуктів з урахуванням доступності для всіх людей.

На практиці ж навчитися створювати дизайн цифрових продуктів, що відповідатиме світовим стандартам та законам із вебдоступності можна на триденному інтенсиві.
Автор: Денис Пристай
Головне фото: Наталія Азаркіна
Гараж
Сподобалась стаття?