Гайд по цифровой доступности iOS-приложений

VoiceOver — функция чтения контента с экрана устройств Apple. Благодаря ей пользователь может управлять устройством, используя речь и клавиатуру.

Для перемещения между элементами используйте свайпы вправо и влево. Для нажатия на элемент — двойной тап.

Изучите общую информацию о VoiceOver и список жестов VoiceOver, чтобы лучше понимать как пользователь взаимодействует со скринридером.

В гайде «Практик доступности» собраны самые важные рекомендации по доступности iOS-приложений.

Для более детального погружения посмотрите Apple Developers — Accessibility, фреймворки Accessibility для Swift. и Accessibility для Objective-C и книгу «Про доступность iOS» от Михаила Рубанова, Mobile Head Dodo Engineering.

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

В этом случае используйте свойство isAccessibilityElement:

• Свойство isAccessibilityElement = true; — элемент доступен для VoiceOver и имеет фокус.
• Свойство isAccessibilityElement = false; — элемент недоступен для VoiceOver и не имеет фокус.

Подписывайте все интерактивные элементы в свойстве accessibilityLabel. Так VoiceOver озвучит пользователю правильное название элементов.

Дополнительно к названию элемента можно прописать его значение в свойстве accessibilityValue. VoiceOver зачитает его с небольшой паузой после названия.

Старайтесь называть элемент одним словом или короткой фразой: «Добавить», «Удалить» или «Добавить событие», «Удалить фото», чтобы экономить время пользователя.

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

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

Чтобы VoiceOver звучал естественнее, начинайте подпись с заглавной буквы и не ставьте в конце точку. Также заранее просклоняйте нужные числа и слова и опишите все грамматические варианты в файле локализации .stringsdict.

Трейты — это типовые параметры, которые можно присвоить элементу в интерфейсе.

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

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

Чтобы VoiceOver сообщал об изменениях на экране, используйте трейты-уведомления из UIAccessibility.Notification.

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

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

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

Задавайте заголовкам трейт header. Благодаря этому у интерфейса появятся структура и смысловые блоки. VoiceOver добавит элементам слово «заголовок», а пользователь сможет перемещаться по ним вертикальными свайпами с помощью ротора.

Открыть ротор можно двумя способами. Первый — описать двумя пальцами окружность на экране, как будто вращаете диск телефона. Второй — одновременно провести по экрану одним пальцем вверх, а другим вниз. Когда VoiceOver зачитает пункт «Заголовки», прекратите двигать пальцами по экрану. Таким образом навигация по заголовкам станет активна.

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

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

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

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

Объединить элементы можно с помощью свойств accessibilityFrame, accessibilityLabel, accessibilityValue и трейта .adjustable.

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

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

Контейнеру с элементами присвойте трейт .adjustable. В значении трейта укажите текущий элемент карусели. Чтобы между элементами можно было переключаться с помощью вертикальных свайпов, добавьте общему контейнеру метод accessibilityIncrement со свайпом вперед и accessibilityDecrement со свайпом назад.

Жест Scrub — это быстрая альтернатива кнопке «Назад» и «Закрыть». Чтобы закрыть элемент и вернуться к предыдущему, нарисуйте двумя пальцами на экране букву Z.

Scrub по умолчанию работает в нативных компонентах. Чтобы добавить его для кастомного элемента, используйте метод accessibilityPerformEscape().

Еще один жест — Magic Tap. С его помощью можно запустить или завершить действие в приложении. Для этого нажмите на экран двумя пальцами два раза.

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

Для поддержки Magic Tap пропишите в методе accessibilityPerformMagicTap() нужное действие.

У пользователя должна быть возможность искать содержимое несколькими способами. Например, используйте комбинацию стандартного и голосового поиска, алфавитную пагинацию, поддержку Siri и Spotlight и так далее.

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

Как правило, в приложениях картинки не несут ценного смысла. В iOS они даже скрываются от VoiceOver по умолчанию.

Но иногда бывает важно сообщить пользователю о наличии изображений. В этом случае добавьте изображению свойство isAccessibilityElement со значением true, трейт image и описание в accessibilityLabel.

VoiceOver может давать подсказки с помощью свойства accessibilityHint. Стандартные контролы уже имеют системные подсказки по умолчанию, для кастомных элементов их нужно указывать вручную.

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

Также в подсказке можно указать, что произойдет при взаимодействии с элементом. Начать лучше с глагола в третьем лице, например, «Откроет профиль».

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

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

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

Все, что сказано в видео, должно быть в субтитрах. А все, что аписано в субтитрах, должно быть в видео.

Accessibility Inspector — это функция в Xcode, которая помогает найти базовые проблемы доступности в приложении.

Инспектор находится в контекстном меню Xcode. Нужно зайти в пункт «Xcode», выбрать «Open Developer Tool», затем «Accessibility Inspector». После проведения аудита появится список с найденными ошибками и возможность подсветить конкретные элементы, в которых найдены недочеты.

Еще один способ проверить базовые ошибки — использовать фреймворки. Самые распространенные среди них — UBKAccessibilityKit и GSCX.

Добавьте их в свой проект в Xcode и запустите приложение. Поверх интерфейса появится кнопка сканирования его на доступность. Как и в Accessibility Inspector появится список с найденными проблемами.