Чи можуть усі користуватися вашим ШІ-додатком? Простий гід з доступності

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

Щоб з цим впоратися, вам не потрібен диплом чи команда з комплаєнсу. Потрібно знати чотири-п’ять місць, де додатки зазвичай “закривають двері” перед людьми, і вміти попросити свій білдер це виправити. Покажу вам найпоширеніші випадки на прикладах — їх набагато легше помітити, коли вже бачив хоч раз.

Чому макет мого додатку ламається, коли хтось збільшує масштаб?

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

Одна знайома мені майстриня створила акуратний невеликий додаток для запису до перукарні своєї мами. Виглядав чудово. А потім мама його відкрила — і перше, що зробила, як і багато людей після шістдесяти, — збільшила текст жестом “пінч-зум”. Макет розвалився. Кнопки накладалися одна на одну, кнопка “Записатися” заповзла під меню, а колонка з часом запису перетворилася на нечитабельну купу.

Це найпоширеніша поломка доступності в ШІ-створених додатках, і вона непомітна, доки хтось не збільшить масштаб. Попросіть свій білдер: “Переконайся, що макет коректно працює, коли текст збільшено до 200%. Нічого не повинно накладатися одне на одне чи обрізатися.” А потім перевірте самі — на своєму телефоні збільште системний розмір шрифту до максимуму і відкрийте свій додаток. Якщо все розсипається — це ваша перша задача для виправлення.

Чому в моєму додатку не варто позначати статус лише кольором?

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

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

Виправлення — це радше звичка, ніж окрема функція: ніколи не покладайтеся лише на колір, щоб щось повідомити. Додайте слово, іконку або форму поруч. “Прострочено” поруч із червоним. Галочка поруч із зеленим. Зірочка й слово “обов’язково”, а не просто червона рамка. Колір можна залишити — просто він не повинен нести повідомлення сам-один.

Чому скрінрідери просто кажуть “кнопка” замість того, щоб назвати її?

Тому що в непідписаної кнопки-іконки — сміттєвого кошика, олівця, лупи без жодного слова — немає тексту, який скрінрідер (програма, якою користуються незрячі та слабозорі люди, щоб екран озвучувався вголос) міг би прочитати, тож він озвучує буквально “кнопка”. Не “видалити”. Не “редагувати”. Просто “кнопка”.

ШІ-білдери люблять акуратні кнопки-іконки, бо вони виглядають сучасно. Але уявіть, що ви користуєтеся додатком, де кожен елемент керування названо “кнопка”, і вам доводиться вгадувати. Не обов’язково додавати видимий текст до кожної іконки — треба лише переконатися, що в кожного елемента керування є назва під капотом, навіть невидима, яку зможе озвучити скрінрідер. Попросіть свій білдер: “Додай доступну підпис-назву до кожної кнопки-іконки — іконка сміттєвого кошика має озвучуватися як ‘Видалити’, олівець — як ‘Редагувати’.” Це невелика зміна, але саме вона визначає різницю між додатком, яким може користуватися незряча людина, і додатком, що є стіною з безіменних кнопок.

Якого розміру мають бути елементи керування для дотику в мобільному додатку?

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

Подивіться, як хтось користується вашим додатком однією рукою в автобусі. Великі пальці широкі й неточні, автобус трясе, а ваш хрестик закриття — 16-піксельна цятка в кутку. Людина промахується двічі, натискає щось позаду нього один раз і здається. Маленькі, тісно розташовані елементи керування — це проблема доступності, а не просто дрібна незручність: вона найбільше б’є по людям із тремором, більшими пальцями чи тими, хто перебуває в русі. Попросіть свій білдер: “Зроби елементи керування для дотику розміром щонайменше 44 пікселі та додай відступи між ними, щоб люди не натискали не туди.” А потім перевірте: відкрийте свій додаток на телефоні й спробуйте виконати основну дію однією рукою, гуляючи. Якщо ви постійно промахуєтеся — промахуватимуться й усі інші.

Як перевірити доступність свого додатку за п’ять хвилин?

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

1. Збільште масштаб. Установіть на телефоні чи в браузері максимальний розмір тексту й відкрийте головний екран. Чи щось накладається, зникає чи обрізається?
2. “Знебарвте” екран. Погляньте на кожне місце, де ваш додаток використовує колір, щоб щось означати, — статус, помилки, обов’язкові поля. Якщо уявити все це в відтінках сірого, чи все ще зрозуміло, що відбувається? Якщо ні — додайте слово чи іконку.
3. Увімкніть скрінрідер на дві хвилини. І в iPhone (VoiceOver), і в Android (TalkBack) він є вбудований. Увімкніть його, заплющте очі й спробуйте виконати основну дію, для якої створений ваш додаток. Ви одразу почуєте, які кнопки безіменні.

Для цього не треба бути розробником. Треба лише на п’ять хвилин перестати тестувати додаток так, як робите це ви, і протестувати так, ніби ваші руки, очі чи екран не такі, як у вас.

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