Упс! Не вдала спроба:(
Будь ласка, спробуйте ще раз.

Інклюзивність в iOS: як забезпечити доступність для користувачів з обмеженими можливостями

Vladyslav Khambir
Vladyslav Khambir Principal iOS Software Engineer at Capital One
17 липня 2024 8 хвилин читання

Ласкаво просимо у світ, де висота стелі всього півтора метра, бордюри висотою метр, а сходів немає, стрибок — єдиний спосіб спуститися на кілька поверхів вниз. Це звучить незручно, правда? Так само незручно може бути користувачам з обмеженими можливостями, якщо їхні потреби не враховані у дизайні ваших застосунків.

Доступність є важливою для створення більш справедливого світу. Протягом десятиліть ми прагнемо розробляти технології з урахуванням думок, експертизи та креативності людей з інвалідністю — технології, які можуть використовувати всі.
Тім Кук, генеральний директор Apple

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

Статистика World Health Organization Статистика World Health Organization

Основні обмеження, з якими може зіткнутися користувач

Зорові обмеження

Сліпота: користувач повністю не бачить екран.

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

1. accessibilityLabel і accessibilityHint допомагають користувачам з обмеженими можливостями зрозуміти, що таке елемент інтерфейсу і як з ним взаємодіяти;

accessibilityLabel надає короткий опис елемента;

accessibilityHint дає додаткову інформацію про дію, яка відбудеться при взаємодії з елементом.

Приклад використання accessibilityLabel та accessibilityHint Приклад використання accessibilityLabel та accessibilityHint

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

Приклад використання accessibilityTraits Приклад використання accessibilityTraits

3. Модифікатори accessibilityValue для представлення поточного значення та accessibilityAdjustableAction для визначення дій, які можуть бути виконані за допомогою регульованих елементів інтерфейсу, як-от Slider, Stepper і PageControl. Застосування accessibilityAdjustableAction дозволяє взаємодіяти з елементом, використовуючи жести регулювання, такі як свайпи по екрану, замість прямої взаємодії з конкретним UI елементом.

Приклад використання accessibilityValue та accessibilityAdjustableAction Приклад використання accessibilityValue та accessibilityAdjustableAction
Ми створюємо наші продукти з урахуванням доступності, адже віримо, що технології мають бути інклюзивними. Від VoiceOver до асистивного дотику, ми прагнемо зробити наші пристрої зручними для всіх.
Сара Херрлінг, директор з глобальної доступності в Apple

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

Рішення: підтримка динамічної зміни розміру шрифту (Dynamic Type) для покращення читабельності тексту.

Досить часто розробники не хочуть підтримувати динамічні шрифти через можливість поломки UI при збільшенні шрифту. Але що, якщо я скажу вам, що порушення UI — це краще, ніж відсутність можливості прочитати текст взагалі?

Підписуйтеся на наші соцмережі

Так, збільшений шрифт може змістити деякі елементи на екрані та зробити додаток менш привабливим, але люди з слабким зором зможуть ним користуватися. Якщо ж текст статичний і користувач не може його розгледіти, то, на жаль, ніякої користі від красивого UI та рівної верстки немає.

Проблеми із слухом

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

Якщо у застосунку відтворюється контент, до нього можна прикріпити субтитри.

Приклад коду для додавання субтитрів Приклад коду для додавання субтитрів

Починаючи з iOS 16, Apple додали Live Captions, які генеруються на льоту, але врахуйте, що їхня якість може бути нижчою, а генерація субтитрів іноді потребує часу. Якщо у вас якісний відеоконтент, де важливі діалоги, має сенс впровадити професійні субтитри.

У разі аудіосповіщень завжди можна відображати сповіщення, підказки, випливні вікна на екрані та підкріпити відповідний Haptic Feedback.

Приклад використання haptic feedback як один з елементів не візуального сповіщення Приклад використання haptic feedback як один з елементів не візуального сповіщення

Обмеження моторики

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

Існує глобальний стандарт для доступності вебконтенту та застосунків — WCAG ? Web Content Accessibility Guidelines . Він включає рекомендації з створення контенту, який може бути сприйнятий, оброблений, інтерпретований та сумісний з різними допоміжними технологіями.

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

Ще один неочевидний інструмент — SiriKit, який дозволяє інтегрувати голосові команди, що надає користувачам можливість взаємодіяти з додатком за допомогою голосу.

Тестування

Розберемося, як протестувати ці рішення.

Ручне тестування

VoiceOver

Увімкніть VoiceOver на девайсі та протестуйте, як ваш застосунок взаємодіє з користувачем.

Увімкнення та вимкнення VoiceOver значно ускладнює тестування, але ви можете використовувати Accessibility Shortcut. Відмітивши кілька потрібних тобі функцій Accessibility, ти можеш швидко активувати або деактивувати їх потрійним натисканням на кнопку блокування.

Accessibility Inspector

Використовуйте Accessibility Inspector в Xcode для перевірки доступності елементів інтерфейсу.

Xcode > Open Developer Tool > Accessibility Inspector Xcode > Open Developer Tool > Accessibility Inspector

Автоматизоване тестування

XCUI Test

Використовуйте XCUI Test для створення автоматизованих тестів доступності.

Приклад тесту з використанням XCUI Test Приклад тесту з використанням XCUI Test

Snapshot тести

Використовуючи бібліотеку AccessibilitySnapshot, ви маєте можливість лише одним тестом перевірити доступність всього екрана.

Приклад використання бібліотеки AccessibilitySnapshot для перевірки доступності Приклад використання бібліотеки AccessibilitySnapshot для перевірки доступності

Після виконання тесту буде згенеровано скріншот, на якому будуть зазначені всі UI елементи та їхні властивості доступності, що значно спрощує підтримку доступності на належному рівні.

Результат виконання тесту Результат виконання тесту

Тестування при масштабуванні

Для великих проєктів, як-от банки, стримінгові платформи та інші, використовують більш комплексні рішення із вбудованими стандартами від WCAG. Такі інструменти можуть автоматизувати виявлення відсутніх traits, accessibility labels, недостатній контраст кольорів, невеликі інтерактивні елементи та інше. Один з прикладів продукт — Evinced, але існує багато альтернативних рішень з подібним функціоналом.

Приклад зауваження після перевірки Evinced Приклад зауваження після перевірки Evinced

Висновок

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

Це не лише відповідає стандартам доступності, як-от WCAG, але й покращує загальний UX та підвищує лояльність ваших клієнтів. Не забувайте тестувати свій застосунок на доступність і вносити необхідні корективи для забезпечення максимальної зручності для всіх користувачів.

Джерела

Підписуйтеся на наші соцмережі

Якщо ви хочете поділитися з читачами SPEKA власним досвідом, розповісти свою історію чи опублікувати колонку на важливу для вас тему, долучайтеся. Відтепер ви можете зареєструватися на сайті SPEKA і самостійно опублікувати свій пост.
0
Прокоментувати
Інші матеріали

Дизайн дитячого простору: середовище, яке виховує та надихає

Алеся Карнаухова 18 липня 2024 12:28

Як підвищити лояльність клієнтів та залучити нових за допомогою SERM? Кейс Netpeak у ніші біодобавок

Андрій Тарасенко 15 липня 2024 21:23

Epic Games буде боротись проти «абсурдних» нововведень від Apple

Вікторія Рудзінська 9 липня 2024 21:42

Як бізнес-спільноти сприяють розвитку вашого нетворку

Максим Олійник 2 липня 2024 11:35

Інклюзивне таксі Uklon у Львові виконало 800 поїздок за 5 місяців

Кіра Іванова 1 липня 2024 17:27