Как сделать iOS-приложение доступнее? Большой и подробный гайд

Простой вопрос: как люди пользуются смартфоном? Смотрят на него, находят нужную кнопку, нажимают на неё — что сложного?

А как пользоваться телефоном тем, кто не видит экран или не может нажать на него? На первый взгляд, это нерешаемая проблема, ведь всё управление завязано на визуале и сенсорных командах. А нет! Интерфейс на экране можно зачитать, а экран телефона превратить в тачпад и делать по нему разные свайпы.

Некоторые люди не могут касаться экрана — они парализованы, нет конечностей в целом или только одного из пальцев. Но даже так можно:

Привет! Меня зовут Миша Рубанов. Я давно исследую тему доступности iOS, написал об этом книгу и хочу поделиться своими знаниями на vc. Сегодня мы разберёмся, как работают разные способы управления смартфоном, чем они отличаются, и как их внедрить в ваше приложение, чтобы оно стало лучше сразу для 4% пользователей.

Если вам удобнее смотреть, а не читать, то включайте моё выступление, там даже жестовые комментарии есть. Содержание статьи практически не отличается.

А чтобы вам было удобнее читать статью и перемещаться по ней, оставлю оглавление:

Для начала разберём, как люди пользуются телефоном. Мы считываем информацию:

И нам нужно отдавать команды телефону, для этого надо:

На каждом этапе есть проблемы:

Не все могут отдавать команды. Например, если у человека нет кистей рук, то он не сможет держать телефон в руке или нажать маленькую кнопку. Значит, нужно дать ему удобный интерфейс управления. Например, внешние большие кнопки, чтобы стучать по ним локтем, или педали для ног.

На первый взгляд, особенно непонятно выглядит управление для незрячих: если нельзя увидеть изображение, то и куда нажимать — тоже непонятно. Тем не менее всё это решено в современных телефонах.

Чтобы адаптироваться под разные технологии доступности, айфону нужно дополнительное описание визуальных элементов. Т.е. мы верстаем как обычно, а потом размечаем нашу вёрстку дополнительными свойствами, отвечая на следующие вопросы:

Все свойства вместе могут создавать довольно сложные описания. Но для большинства случаев их будет достаточно.

Описание полного экрана для адаптированной версии выглядит примерно так:

Разные технологии берут разные части этого описания. Мы рассмотрим три:

Все три режима отличаются не только с точки зрения визуала, но и с точки зрения способа взаимодействия: Voice Control работает через кнопки, для Switch Control важно группировать элементы, а скринридер требует полного описания. Разберём каждый подробнее.

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

Если мы подпишем все кнопки на экране через API доступности, то человек сможет отдавать голосовые команды. Телефон будет превращать их в текст и по нашим подписям понимать, о какой кнопке говорит человек.

Управление голосом подходит людям, которые не могут коснуться экрана, но при этом могут говорить (к сожалению, не работает с русским языком). Например, это люди, у которых не работают или отсутствуют кисти рук, люди с тремором, у которых сильно трясутся руки, или парализованные люди.

Ограничения могут быть и временными. Например, если человек обжёг руку, сломал её или временно не видит, потому что на исследовании закапали в глаза капли, которые расширяют зрачки.

Есть три способа того, как можно отдавать команды:

Чем лучше адаптирован интерфейс, тем проще им пользоваться, но Voice Control позволяет выйти из любой ситуации. Для работы Voice Control нужны кнопки, которые мы будем «нажимать» голосом. Кнопки эти должны быть правильно подписаны, а описание состоять из типа, названия и синонимов.

Если описание кнопки отсутствует, то придётся «нажимать» цифру. Если и тип «кнопки» не указан, то придётся переключаться на сетку.

Ещё лучше, когда у всех нажимаемых элементов есть понятные названия. Кнопки с текстом внутри точно будут доступны, а вот кнопкам с иконками (например, кнопка добавления товара в корзину в виде плюсика в круге) нужно дополнительно указывать названия.

Дополнительно к названию можно добавлять и значение элемента. Это удобно во многих случаях, смотрите:

Значения не используются для Voice Control, потому что их и так видно на экране. Но чтобы нажать на кнопку, нужно сказать её название.

В речи мы используем синонимы, чтобы говорить разнообразно. Это важный аспект и для голосового управления, ведь мы можем говорить не только так, как подписано на экране.

Для синонимов есть специальное свойство в котором можно перечислить альтернативные названия. Например, для кнопки добавления в корзину стоит добавить синонимы «в корзину», «добавить» и «к��пить».

Switch Control появился раньше, чем Voice Control, но не уступает ему по возможностям. Если совсем общими словами, то он позволяет управлять телефоном с помощью любых внешних сигналов. Управление отличается очень сильно, но вам будет всё понятно, если вы когда-нибудь играли на геймпаде.

Для управления Switch Control нужны внешние устройства, поэтому сначала посмотрим на них. Начнём с простого — геймпадов для игровых консолей. Стандартные геймпады очень эргономичны: в основном они используют большие пальцы для ввода, но есть несколько кнопок для указательных пальцев.

Очевидно, что такой способ ввода доступен не для всех: например, люди без больших пальцев практически не могут пользоваться таким контроллером — им нужен альтернативный способ ввода. Иногда достаточно позволять переназначить кнопки, но этого может быть недостаточно.

В качестве альтернативы Microsoft продаёт другой контроллер для ввода: он представляет собой две большие панели, по которыми можно водить любым пальцем или культей. Понятно, что двух панелей недостаточно, поэтому с наружной стороны есть дополнительные разъёмы для подключения самых разных кнопок.

В качестве элементов управления можно подключить разные кнопки, датчики, контроллеры, сенсоры и т.п.

Для PlayStation тоже есть адаптированный контроллер, но выглядит он иначе: это круглый прибор с большими кнопками по краям и дополнительным джойстиком для управления. Его тоже можно расширять дополнительными кнопками.

При этом управление на консолях не такое, как на сенсорных телефонах: на экране есть специальная рамка фокуса, которую нужно перемещать по экрану. Для навигации используются четыре жеста: движение фокусов вперёд и назад, выбор и отмена. В играх на приставках управление такое же.

Вернёмся к телефону. iPhone позволяет включить такое же управление: на экране будет рамка фокуса, которую можно передвигать и выбирать элементы. Интересно, что достаточно одного сигнала для выбора элемента: фокус может перемещаться автоматически, а человек будет лишь нажимать в нужный момент для выбора. Отмену можно перенести в контекстное меню действий, которое появляется после выбора.

Простота управления открывает очень широкие возможности для самых разных людей: например, Стивен Хокинг контролировал только одну мышцу на щеке. Напрягая её, он давал сигнал компьютеру и так мог писать, говорить и управлять самим компьютером.

Интересно не только то, что достаточно одного сигнала, но и то, каким он может быть. Есть несколько принципиально разных способов отдать команду.

Сигнал от внешнего устройства. К телефону можно подключить какую-нибудь клавиатуру по проводу или Bluetooth.

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

Трекинг головы. С помощью камеры телефон может распознавать движения головы или глаз как движение курсора на экране, а разные эмоции превращать в команды.

Распознавание звуков. Не все люди могут отдавать точные команды, но могут издавать разные звуки: кряхтение, цокание, шипение и т.п. С их помощью тоже можно переключать рамку фокуса и выбирать элементы.

После выбора любого элемента будет появляться специальное меню: первое действие в нём — выбор. Также в нём можно найти и дополнительные действия: скролл, нажатие физических кнопок, управление музыкой, режимами навигации и т.п.

В это меню можно добавлять и свои действия, но это будет ближе к концу статьи.

Конечно, такое управление через дополнительный фокус замедляет управление телефоном. При этом навигацию можно и ускорить. Для этого достаточно сгруппировать элементы для перемещения по их дереву.

Пользоваться клавиатурой было бы невозможно, если бы надо было подряд проходить по всем кнопкам. С группировкой элементов ввод становится сильно проще: сначала фокус проходит по всем рядам, человек выбирает нужный, затем внутри ряда выбирает одну из групп элементов, а в конце выбирает нужную кнопку внутри группы из трёх-четырёх букв. После этого появится меню, в котором можно выбрать команду «нажать».

Если адаптацию для Voice Control вы уже сделали, то поддержать Switch Control даже слишком просто. По умолчанию iOS самостоятельно решает, надо ли группировать элементы, но вы можете расставить явные команды на группировку или разделение элементов.

После адаптации на экране значительно уменьшается количество элементов, а значит фокусу проще между ними перемещаться и управление становится удобней. Всё ещё важны свойства, которые мы задавали для Voice Control, через них же Switch Control выбирает на каких элементах фокусироваться.

Можно не перемещать фокус, а прицелиться перекрестьем. Сначала навести вертикальную полосу так, чтобы нужный элемент оказался внутри неё, а затем точной линией внутри полосы навести на элемент. Потом повторить тоже самое вертикально.

Этот режим чаще всего запасной и спасает, если приложение не адаптировано. Им трудно вырабатывать привычку, он требует своевременной реакции, да и ждать придётся долго, если не получится с первого раза навестись на нужный элемент.

При адаптации для Switch Control мы предполагаем, что человек видит то, что изображено на экране, поэтому достаточно адаптировать те элементы, которые он будет нажимать.

Дополнительно нужно сгруппировать элементы по смыслу. Например, на экране настройки кофе такая группировка нужна для контрола выбора размеров и для всей панели топпингов. Таким образом человек сначала сфокусируется на нужной группе элементов, а затем внутри группы выберет нужный размер или сироп.

Тестировать Switch Control можно с помощью Bluetooth-клавиатуры или геймпада: подключите их к телефону, назначьте кнопки и отдавайте команды. Пример на видео из начала раздела:

Мы уже посмотрели как дополнительная разметка позволяет создать альтернативное управление телефоном. Давайте перейдем к самому необычному сценарию: как пользоватьеся телефоном, когда не видишь что происходит на экране, а значит и не можешь нажать на нужные действия.

Если мы подписали все кнопки в интерфейсе и назначили им нужный тип, то телефон и его операционная система может взять этот текст и озвучить текст — так работают скринридеры, на айфоне это VoiceOver. Получается, что всю информацию на экране можно просто прослушать.

Команды тоже отдаются иначе: экран телефона превращается в большую сенсорную панель. Больше не нужно точно нажимать на кнопки — достаточно выполнять действия с помощью неточных свайпов:

Жестов много для разных команд, некоторые отдаются несколькими пальцами или сложным жестами. Например, чтобы переместиться на один экран назад нужно вертикально «почесать» двумя пальцами по поверх��ости.

Для описания элемента у нас есть несколько свойств: название, значение и trait — это тип или свойства элементов. Название мы уже использовали в Voice Control для описания элементов, а значение используется только для скринридера.

При навигации есть такая же проблема как в Switch Control: элементов на экране очень много, поэтому приходится свайпать через все. Для упрощения нужно уменьшать количество элементов объединяя их по смыслу. Например, кнопка «купить» в интерфейсе — это два отдельных элемента (кнопка и надпись с ценой), но семантически это одно целое, ведь мы «покупаем за цену». Поэтому для скринридера в описании будет название кнопки, цена и тип.

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

Объединить нужно и элемент управления размером напитка. Для скринридера он превратится в «элемент регулировки». Тогда значение элемента можно изменить вертикальными свайпами. При этом названием элемента будет «размер», а в качестве значения мы используем объём в миллилитрах и добавим количество вариантов, чтобы можно было понять, как много ещё можно свайпнуть.

При этом элемент управления размером и кнопка «купить» оказываются связанными — изменив размер, мы поменяем и цену. Такие связи нужно дополнительно озвучивать для скринридера через оповещения. Оповещение стоит вызывать при изменении цены, тогда и добавление какого-нибудь сиропа тоже озвучит новую цену.

В итоге для незрячих пространство оказывается также важно, как и для видящих людей: нужно увеличивать размеры элементов, объединять элементы по смыслу, сообщать голосом изменения цены при изменении размера. Стоит даже перечислять, сколько есть вариантов для одной опции внутри одной строки. Например, сколько есть размеров, чтобы понять, сколько свайпов можно сделать или сколько настроек есть у напитка.

Важна не только связь элементов внутри экрана, но и навигация между экранами. Есть два основных действия:

Ниже три примера:

Некоторые крупные элементы могут скрывать дополнительные действия. Например, ячейка товара в корзине меню содержит скрытую кнопку удаления или видимые кнопки изменения количества.

Для Switch Control эти кнопки доступны в меню, которое появляется после выбора ячейки. Там же можно указать иконку, которая должна быть в этом меню. Без иконки покажется лишь первая буква от названия действия.

Для скринридера эти действия тоже будут доступны:

Voice Control покажет наличие действий через дополнительную стрелочку у шильдика с цифрой, а само действие откроется в action sheet.

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

В итоге получается, что у разных способов управления разная семантика:

Получается, что когда мы адаптируем элементы управления, важно помнить: элементы регулировки нужны не всем технологиям и не во всех случаях. Иногда нужно более детальное описание, чем есть у скринридера, и ещё много всякого.

Например, для переключателя размера кофе для VoiceOver лучше сделать элемент регулировки, а для всех остальных технологий — отдельные кнопки выбора размера. Регулятор громкости/яркости будет семантически для всех технологий элементов регулировки, потому что им логично отдавать команды «увеличь яркость» или «уменьши громкость».

Кажется, что пользователей таких технологий должно быть не очень много. Но, к сожалению, это искажение нашего восприятия и смотреть надо на сумму пользователей, которым помогают и Voice Control, и Switch Control, и VoiceOver.

Среди любителей пиццы пользователей не очень много, но за месяц набирается тысяча сессий и важно, что для этих людей адаптация приложения — единственный способ им воспользоваться. Чем критичнее одна из функций доступности для человека, тем больше нужно сделать для её поддержки. Что логично, на самом деле.

При этом поверх этой же разметки:

Этим пользователям не нужны технологии из статьи на постоянной основе. Однако, скорее всего, они плохо видят и хотели бы иногда услышать, что за кнопка изображена на экране, а не идти за очками.

Чаще всего у этих же пользователей включён Dynamic Type — возможность менять размер текста, увеличивая его до четырёх раз. Размер текста увеличивают 10% пользователей, а ещё 10% его уменьшают.

В итоге выходит, что в сумме пользователей технологий, которые работают поверх подписи элементов, около 4%. Ими пользуются не только люди со значительными ограничениями, но и те, кто плохо видит. Для них телефон озвучивает названия элементов, когда на экране что-то написано мелким шрифтом.

Есть и другие технологии доступности. В сумме хотя бы одну настройку доступности включают 45% людей. Данные с сайта appt.org, но полностью совпадают с картиной пользователей приложения Додо Пицца.

Стандартными средствами в Figma такое не задизайнить. Даже плагинов подходящих почти нет, но можно воспользоваться приложением VoiceOver Designer. Оно позволит добавить разметку поверх скриншота, покажет все свойства, само распознает текст, позволит запустить прототип на телефоне и передать макет в разработку. А ещё там же есть куча примеров уже размеченных экранов.

Сам процесс разметки очень простой. Обводим области, выбираем нужные свойства и запускаем прототип на телефоне.

Мы разобрали три способа управления телефоном: голосом, внешними устройствами и через скринридер. У каждого способа своё управление, которое создает разные требования для разработчиков. При этом проще всего начать адаптацию для управления голосом, затем адаптироваться для управления внешними устройствами, а в конце адаптировать управление для скринридера.

Кажется, на этом всё. Если вы хотите узнавать больше о доступности и разработке iOS-приложений, но в формате более коротких текстов, подписывайтесь на мой Telegram-канал «Рубанов про мобилу».

О том, как мы развиваем IT в Додо, читайте в Telegram-канале Dodo Engineering. Там мы рассказываем о жизни, культуре и последних разработках нашей IT-команды.