Saint AppsConf 2019. Accessibility в iOS. Невидимая сторона вашего приложения

Не каждый разработчик задумывается об относительно узкой аудитории людей с определенными ограничениями. В рамках доклада поговорим о том, что скрывается под термином accessibility и почему она важна не только для людей с особыми потребностями, но и для каждого пользователя. Детальнее остановимся на Voice Over, а также разберем полезные базовые вещи, которыми обладает платформа iOS, но которые почему-то упускаются разработчиками.
На примере приложения Juno расскажу о том, какие шишки мы набивали и как изобретали колесо.

Transcript

1. Accessibility в iOS. Невидимая сторона вашего приложения Антон Силюк (Juno)
2. Accessibility 2
3. A11y 3
4. Доступность 4
5. Кто ты такой? • Anton Siliuk • Juno • Rider app 5
6. Жуно? • приложения для заказа поездки • пока работает только в New York 6
7. О чем мы будем говорить • что такое доступность • что сделать в первую очередь • Voice Over • тестирование 7
8. Делая приложение доступным для людей с ограниченными возможностями, вы делаете его доступным для ВСЕХ! 8
9. Доступность как инфраструктура minsknews.by msk.kp.ru 9
10. Доступность – это больше про подход и отношение, чем про технологии 10
11. При разработке новых сценариев стоит поставить себя на место пользователей Что, если: • вы не видите экран • вторая рука занята/отсутсвует • очень шумная обстановка/вы не слышите 11
12. И после ответить на вопрос: текущим решением все еще удобно пользоваться? 12
13. Например, жесты которые можно вызвать одной рукой source 13
14. Или учитывать понижение прозрачности 14
15. DynamicType 15
16. Никто не использует DynamicType? • Juno: Заказано поездок с нестандартным dynamic type 24% • PSDPDFKit: Около четверти1 пользователей @pdfviewerapp используют нестандартный размер текста • Overcast: 40%2 пользователей Overcast используют нестандартный размер текста 2 Overcast Twi-er 1 PSDPDFKit Twi+er 16
17. Игнорировать желания пользователя – это грубо 17
18. Voice Over 18
19. С чего начать? Настройки -> (Основные)? -> Универсальный доступ -> Быстрые команды (в самом низу) -> Voice Over Теперь его можно включить: • тройное нажатие на home button (iPhone 8) • тройное нажатие на sleep button (iPhone X) 19
20. Как обычно работает VoiceOver • сканирует элементы сверху-вниз, слева-направо • при фокусировке обводит элемент в рамку • произносит название, значение и другие характеристики • можно водить пальцем по экрану • свайп, чтобы переключаться между элементами 20
21. Базовые жесты • свайп влево/вправо, чтобы переключиться на предыдущий/следующий элемент • свайп вверх/вниз на элементе, если он элемент регулировки или с ним есть связанные действия • сделать жест Z двумя пальцами, чтобы вернуться • двойное нажатие в любом месте, чтобы активировать текущий элемент полный список
22. Тройной тап тремя пальцами, чтобы экран погас 22
23. Почувствуйте приложение 23
24. Как было у нас 24
25. Как было у нас • Burger_Menu_Big • не переносит фокус на меню при открытии 25
26. Как было у нас • Burger_Menu_Big • не переносит фокус на меню при открытии • фокусируется на элементах на заднем плане • Invite_Button, Button 26
27. Как было у нас • Burger_Menu_Big • не переносит фокус на меню при открытии • фокусируется на элементах на заднем плане • Invite_Button, Button • игнорирует фото пользователя 27
28. Как было у нас • фокус на центральный элемент в экране 28
29. Как было у нас • фокус на центральный элемент в экране • лишние элементы в иерархии 29
30. Как было у нас • фокус на центральный элемент в экране • лишние элементы в иерархии • непонятный текст для карточки 30
31. Как было у нас • Нельзя включить/выключить кредиты 31
32. Как было у нас • нельзя включить/выключить кредиты • фокусируется на элементах под экраном 32
33. Закусали рукава и чиним 33
34. Что сделать в первую очередь • спрятать ненужные элементы • сделать видимыми для VoiceOver нужные элементы • использовать понятный текст • правильно группировать элементы • предоставить такие же возможности 34
35. У всех NSObject Поле Значение isAccessibilityElement "Видит" ли VoiceOver этот компонент accessibilityElementsHidden Чтобы временно спрятать компонент 35
36. UIAccessibility No/fica/on UIAccessibility.post(notification: .screenChanged, argument: nil) UIAccessibility.post(notification: .layoutChanged, argument: nil) • если вы используете кастомную навигацию • заставляет VoiceOver просканировать экран заново • вызвать в completion-блоке анимации 36
37. (New) Swi$UI это сделает за вас 37
38. view.accessibilityViewIsMod al: Bool • Говорит VoiceOver не искать элементы на соседних View • Есть некоторые нюансы в более сложных иерархиях doc 38
39. Что сделать в первую очередь • сделать видимыми для VoiceOver нужные элементы • спрятать ненужные элементы • использовать понятный текст • правильно группировать элементы • предоставить такие же возможности 39
40. У всех NSObject Поле Значение 40
41. У всех NSObject Поле Значение Label Первое, что будет произнесено 41
42. У всех NSObject Поле Значение Label Первое, что будет произнесено Value Произносится вторым, можно использовать для Switch, Slides e.t.c 42
43. У всех NSObject Поле Значение Label Первое, что будет произнесено Value Произносится вторым, можно использовать для Switch, Slides e.t.c Trait Описывает поведение компонента 43
44. У всех NSObject Поле Значение Label Первое, что будет произнесено Value Произносится вторым, можно использовать для Switch, Slides e.t.c Trait Описывает поведение компонента Hint Произносится последним, после некоторой паузы 44
45. Новый доступный элемент UIAccessibilityElement open class UIAccessibilityElement: NSObject { /* ... */ } // in parent let chartAccessibility = UIAccessibilityElement(accessibilityContainer: self) chartAccessibility.accessibilityFrame = CGRect(x: 0, y: 0, width: 100, height: 100) chartAccessibility.accessibilityLabel = "Cool chart" accessibilityElements = [chartAccessibility] 45
46. Что сделать в первую очередь • сделать видимыми для VoiceOver нужные элементы • спрятать ненужные элементы • использовать понятный текст • правильно группировать элементы • предоставить такие же возможности 46
47. Группируем элементы final class Container: UIView { init() { isAccessibilityElement = true } var accessibilityLabel: String { get { return titleLabel.text } set { fatalError() } } var accessibilityValue: String { get { return valueLabel.text } set { fatalError() } } ... } 47
48. Группируем элементы (Swi2UI) VStack { title value } .accessibilityElements(children: .combine) 48
49. Меняем порядок элементов // Foundation class NSObject { @available(iOS 8.0) var accessibilityElements: [Any] } // App view.isAccessibilityElement = false view.accessibilityElements = [secondLabel, firstLabel] !! Аккуратно, это перетирает остальные дочерние элементы 49
50. Меняем порядок элементов (Swi4UI) HStack { Text("Second"), Text("First").accessibility(sortPriority: 1) } 50
51. Что сделать в первую очередь • сделать видимыми для VoiceOver нужные элементы • спрятать ненужные элементы • использовать понятный текст • правильно группировать элементы • предоставить такие же возможности 51
52. accessibilityAc+vate() Вызывается у элемента, находящегося в фокусе, двойным тапом в режиме VoiceOver final class CreditsView: UIView { override func accessibilityActivate() { // Do main element action switchView.isOn.toggle() } } 52
53. accessibilityPerformEscape() -> Bool Вызывается по очереди у всех, кто на экране, пока кто-то не ответит true, когда пользователь делает Z-жест final class MenuViewController: UIViewController { override func accessibilityPerformEscape() -> Bool { // Call dismiss code here close() return true } } 53
54. Adjustable trait final class SomeControl: UIView { init() { self.accessibilityTraits = .adjustable } override func accessibilityIncrement() { // Called on swipe up } override func accessibilityDecrement() { // Called on swipe down } } 54
55. Добавить к элементу связанные действия final class PaymentView: UIView { init() { accessibilityCustomActions = [ UIAccessibilityCustomAction( name: "Delete", target: self, selector: #selector(deleteCell) ) ] } @objc private func deleteCell() { /*...*/ } } 55
56. Добавить к элементу связанные действия (Swi;UI) struct PaymentView: View { var body: some View { HStack {} .accessibilityAction(named: Text("Delete")) { /*..*/ } } } 56
57. Что сделать в первую очередь • сделать видимыми для VoiceOver нужные элементы • спрятать ненужные элементы • использовать понятный текст • правильно группировать элементы • предоставить такие же возможности 57
58. Просто выполнив эти пять пунктов, можно СУЩЕСТВЕННО улучшить доступность приложения 58
59. Swi$UI + Accessibility = ❤ • облегчает работу с accessibility • много делает из коробки • Apple явно делает на это большой упор 59
60. Кому еще это может быть полезно? 60
61. Пользователям Виртуального Контроллера 61
62. Виртуальный контроллер Позволяет управлять устройством с помощью одной или более внешних физических кнопок full demo apple support 62
63. Voice Control (iOS 13+) 63
64. Voice Control @Juno 64
65. VoiceOver поможет даже вам // App textField.accessibilityLabel = "Email" // XCUITest let nameTextField = app.textFields["Email"] nameTextField.tap() nameTextField.typeText("Hello World") 65
66. Тестируем Доступность source 66
67. Руками: Accessibility Inspector 67
68. Xcode -> Open Developer Tool -> Accessibility Inspector 68
69. Вот как он выглядит 69
70. Можно фокусироваться на элементе 70
71. Или менять настройки на устройстве 71
72. Или запустить аудит экрана 72
73. Автоматическое тестирование: XCUITest // App let view = UIView() view.isAccessibilityElement = true view.accessibilityTraits = .button view.accessibilityIdentifier = "accessibility-button-send" view.accessibilityLabel = "Send" // XCUITest let button = app.buttons["accessibility-button-send"] XCTAssertEqual(button.label, "Send") 73
74. Человека инвалидом делает не нарушение зрения, а недоступность приложения 74
75. Мы обсудили • доступность – это подход • о чем подумать в первую очередь • Voice Over • шаги к улучшению • тестирование 75
76. Видео по теме • UIKonf: Sommer Panage – Accessibility: iOS for All • WWDC: Audi?ng Your Apps for Accessibility • WWDC: Visual Design and Accessibility • WWDC: Deliver an Excep?onal Accessibility Experience • WWDC: SwiGUI Accessibility 76
77. Мои контакты • ! Mail: anton.siliuk@gojuno.com • " Twitter: @antonsiliuk • # Telegram: @antonsiliuk 77