Доступність у дизайні. Чому це потрібно не лише для державних сайтів і як її досягти

💡 Усі статті, обговорення, новини про продукти — в одному місці. Приєднуйтесь до Product спільноти!

За статистикою, мільярди людей у світі живуть з різноманітними вадами здоровʼя. Створення доступних інтерфейсів банально збільшує аудиторію та покращує UX. Основне, про що потрібно памʼятати — це правильний контраст, кольори, легкий для прочитання текст, зрозуміла навігація, керування клавіатурою та підтримка скрін-рідерів. І хоч за законом не завжди потрібно досягати повної відповідності WCAG, та все ж кожен крок до цього має значення.

Цього грудня у Великобританії закінчився UK Disability History Month, і це чудове нагадування для дизайнерів про важливість доступності в інтерфейсах. Хоч повна інклюзивність може здаватись недосяжною, ваш рух у цьому напрямку не буде марним. В цій статті я, Володимир Мерленко, продуктовий дизайнер у Cieden Agency, поділюся досвідом, як можна зробити продукти доступнішими вже сьогодні.

Позитивна та негативна статистика

Більшість людей зазвичай асоціює доступність з державними сайтами, та насправді основні принципи інклюзивного дизайну однакові для всіх типів інтерфейсів. І цьому є чітка причина — світова статистика.

Погляньмо спочатку на позитивний тренд: 42% респондентів цього року зазначили, що їхні компанії дотримуються стандартів вебдоступності в порівнянні з 35% попереднього року. Як мінімум ця статистика має мотивувати нас рухатися в напрямку інклюзивності.

Але є й сумна реальність, про яку не можна забувати:

• Лише в США 28% дорослого населення живуть з певними обмеженнями.
• Більше ніж 2 мільярди людей у світі мають порушення зору.
• Приблизно кожен десятий має дислексію.
• 1 з 12 чоловіків та 1 з 200 жінок мають дальтонізм.
• Півмільярда людей станом на 2019 рік пережили втрату кінцівок.

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

Обов’язки дизайнера

Створення доступних продуктів — це командна робота. Та є кілька речей, на яких повинні фокусуватися перш за все дизайнери:

🎨 Колір і контрастність

• Дотримуйтесь правил контрастності WCAG для текстів, кнопок, компонентів форм та інших важливих дизайн-елементів.
• Намагайтеся не покладатися лише на колір, тому що багато людей мають дальтонізм.
• Перевіряйте свій дизайн, використовуючи симулятори зору, щоб побачити, наскільки легко користувачам буде розрізняти кольори.
• Пам’ятайте, що кольори інтерпретуються по-різному в різних частинах світу. Наприклад, на заході червоний може викликати тривогу, тоді як в країнах Азії, навпаки, позитивні емоції.
• Уникайте неправильної інтерпретації, додаючи візуальну індикацію до кольорів за допомогою інших дизайн-елементів, наприклад іконок.

📱 Навігація та лейаут

• Не експериментуйте з чимось, що може заплутати користувачів, які мають когнітивні порушення. Натомість завжди використовуйте прості та звичні патерни навігації.
• Часом брак досвіду спокушає ʼвинайти колесоʼ. Я раджу покладатися на перевірений F-патерн лейауту для сторінок, тому що більшість людей все-таки читають зліва направо та зверху вниз (принаймні в західних культурах).

🎉 Вільний простір

• Так званий ‘white space’ покращує легкість сприйняття інформації для користувачів з когнітивними порушеннями.
• Його варто використовувати, щоб зменшити навантаженість у дизайні та згрупувати пов’язаний між собою контент.

👁️‍🗨️ Текст і шрифти

• WCAG рекомендують мінімальний розмір для основного шрифту в 16 пікселів.
• Часто через обмежений простір у складних інтерфейсах цього важко досягнути. У такому випадку використовуйте мінімум 14 пікселів для основного тексту та додатково можете збільшити його товщину накреслення і контрастність з фоном.
• Все ж, якщо ви створюєте дизайн для простіших інтерфейсів або лендінгів, орієнтуйтеся на 16 пікселів як ‘rule of thumb’.

▶️ Автовідтворення

• Люди з когнітивними порушеннями потребують різну кількість часу для того, щоб переглянути та зрозуміти контент.
• Дозвольте таким користувачам контролювати інтерактивні компоненти (наприклад, каруселі чи відео). Дайте їм можливість вручну зупиняти, відтворювати і навігувати назад/вперед.

🔊 Професійні жаргонізми

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

🏄‍♀️ Динамічні елементи

• Якщо плануєте використовувати динамічні елементи на сторінці (наприклад, швидкі та яскраві анімації), спочатку попередьте про це користувачів.
• Люди, на яких такий контент може негативно вплинути, повинні мати можливість відмовитися від його перегляду.

🗨️ Субтитри

• Користувачі можуть мати проблеми зі слухом. Тому в ідеалі відео, які ви використовуєте у інтерфейсах, повинні бути з субтитрами.
• Щоб пришвидшити цей процес, раджу, наприклад, використовувати АІ-інструменти для їх створення.

Обов’язки розробника

Хоч дизайнери і відповідальні за те, щоб інтерфейси були доступними, саме розробники втілюють цей функціонал у реальність.

⌨️ Навігація клавіатурою

• Люди, які не можуть працювати двома руками, покладаються на навігацію клавіатурою. Спробуйте заради тесту кілька годин покористуватися компʼютером лише однією рукою і вам усе стане зрозуміло.
• Цей функціонал також важливий для користувачів смарт-телевізорів, ігрових консолей та навіть банально для людей, у яких зламалася мишка.
• Хоч це й завдання девелопменту, та дизайнери все ще повинні допомагати, надаючи правильні стилі стану фокусування для компонентів.

💬 Альт-текст

• Це описи візуальних елементів на сторінці, які не видно користувачам безпосередньо в інтерфейсі, але вони прописані в коді. Це важливий елемент для людей з вадами зору, що користуються скрін-рідерами.
• Як дизайнер ви можете допомогти розробникам правильно імплементувати цей функціонал, надаючи такі описи. Перш за все, робіть їх для фотографій, відео та інших графічних елементів, що впливають на те, як люди інтерпретують ваш інтерфейс.
• Наприклад, якщо ви створюєте дизайн блогу, альт-текст для фото у статті буде важливим. Але для декоративних іконок — навряд.

✍️ Правильні заголовки

• Користувачі скрін-рідерів навігують сторінками за заголовками. І це один зі способів, як вони можуть пропускати нецікаві секції та зупинятися на тому, що їм потрібно.
• Хоч дизайнери й обирають стилі для шрифтів, саме розробники мають їх правильно імплементувати — тут важливий тімворк.

🎥 Адаптивність при зумі

• Створення адаптивного дизайну під різні девайси (наприклад, мобайл чи планшет) вже є стандартною практикою, та все ж багато хто забуває тестувати адаптивність зуму в браузері.
• WCAG рекомендують перевіряти інтерфейси при зумі в 200%, щоб функціонал при цьому залишався таким самим, як і в стандартному розмірі.
• Цікаве спостереження — деякі люди користуються зумом у браузері весь час. Вони навіть можуть про це й не знати. Тому ваш інтерфейс повинен адаптуватися до різних ситуацій.

Корисні інструменти для полегшення життя

Нижче ділюся інструментами, які з мого досвіду спрощують роботу над інклюзивним дизайном:

Stark — Figma-плагін, який особисто я використовую для перевірки контрасту кольорів. Але він також може допомогти з правильною типографією, альт-текстом, симулятором зору тощо. Є безкоштовна версія та платна з додатковою функціональністю.

Website Accessibility Checker — тут ви можете вставити посилання на будь-який сайт, побачити його оцінку доступності та отримати певні поради. Хоч вони в основному й будуть технічними, але все ще можуть допомогти зрозуміти, що не так з дизайном, і яким чином це можна покращити.

UserWay Accessibility Widget — вебвіджет, який можна додати на сайт, щоб дати змогу користувачам збільшувати контрастність, розмір тексту чи курсору, вмикати режим скрін-рідера та багато іншого. Це справді корисна річ, якщо у вас недостатньо ресурсів, щоб зробити оригінальний дизайн доступнішим, але ви все ще хочете його покращити.

Website Accessibility Checklist — Детальний чек-лист із 28 пунктів про вебдоступність. Він підійде вам, якщо починаєте новий проект, плануєте покращити наявний дизайн або просто хочете пригадати усі ці гайдлайни.

Що буде, якщо я не зроблю дизайн доступним? 🤔

Часте питання, яке собі ставлять дизайнери. З особистого досвіду та досвіду моїх колег — нічого серйозного не трапиться. Але все ж у світі існує кілька законів, які я рекомендую перевірити перед тим, як починаєте роботу над новим проєктом:

• Americans with Disabilities Act
• Section 508 of the Rehabilitation Act
• European Accessibility Act
• Accessible Canada Act
• Disability Discrimination Act

Коротко: якщо ви працюєте в таких доменах, як Healthcare, Education, Banking або Government, дотримання WCAG буде хорошою ідеєю.

Коли це не обов’язково

Хоч вебдоступність і повинна бути вашою ціллю для всіх продуктів, є кілька винятків із правил, коли її можна не впроваджувати, не порушуючи при цьому закон:

• Якщо це надто дорого або складно для імплементації.
• Якщо покращення доступності продукту дуже сильно змінить його оригінальну ідею.
• Якщо це лише внутрішній продукт для маленької групи користувачів без будь-яких вад.
• Якщо це рання або тимчасова версія продукту.

Підсумок

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

Потужне відео наостанок: