Accessible iOS Apps: Up To 11!

Let’s go on a journey to create, not just accessible iOS apps, but awesome accessible experiences that absolutely all your users will be able to use and love. How do we bring VoiceOver's support to the next level? How should we deal with Dynamic Type, so they can choose the font size? How can we support Smart Invert Colors? What about Reduce Motion, or Reduce Transparency? What is the Rotor? What can we do to improve the user's experience with Voice Control and Switch Control? And, how we can test all these features? We'll try to answer all these questions to help you bring the accessibility levels of your iOS app up to eleven!

Transcript

1. Software Engineer @ Spotify
2. #accessibilityUpTo11
3. 0 - Starting from zero #accessibilityUpTo11
4. 0 - Starting from zero #accessibilityUpTo11 “Conference Name. #a11yTo Conf. Text Field. Double tap to edit.” Label Value Trait Hint VoiceOver
5. 0 - Starting from zero
6. accessibleView.isAccessibilityElement = true accessibleView.accessibilityLabel = NSLocalizedString(“stringKey”, comment: “”) accessibleView.accessibilityTraits = UIAccessibilityTraitButton accessibleView.accessibilityValue = “A value” accessibleView.accessibilityHint = “Does something.”
7. #accessibilityUpTo11 1 - Labelling Correctly 4d “Four d” “Four days ago” 3h 24m “Three h twenty-four meters” “Three hours twenty-four minutes” Mon “Mon” “Monday” Most read “Most read” “Most red”
8. #accessibilityUpTo11 1 - Labelling Correctly Paella
9. let attributes: [NSAttributedString.Key: Any] = [.accessibilityIPANotation: “paˈeʎa”] recipeTitle.accessibilityAttributedLabel = NSAttributedString(string: “Paella”, attributes: attributes) #accessibilityUpTo11 1 - Labelling Correctly Paella
10. let attributes: [NSAttributedString.Key: Any] = [.accessibilitySpeechLanguage: “es-Es”] recipeTitle.accessibilityAttributedLabel = NSAttributedString(string: “Paella”, attributes: attributes) #accessibilityUpTo11 1 - Labelling Correctly Paella
11. #accessibilityUpTo11 1 - Labelling Correctly “Button” “Close_icon_@3x” “Close_001_2019” “Close Button” “Possibly close ” “Close”
12. #accessibilityUpTo11 2 - Go to Section Two… Step 1 - Show the Rotor Step 2 - Navigate From Artists to Genres: 10 flicks to the right vs 1 swipe down
14. headingLabel.accessibilityTraits = UIAccessibilityTraitsHeader
15. 3 - Notifications #accessibilityUpTo11 Your App VoiceOver Elements? [button, …]
16. 3 - Notifications #accessibilityUpTo11 Your App VoiceOver Elements? [button, …]
18. UIAccessibility.post( notification: .screenChanged, argument: customModalView) UIAccessibility.post( notification: .layoutChanged, argument: infoView) view.accessibilityViewIsModal = true
19. 3 - Notifications #accessibilityUpTo11
21. let announcementAttributes = [NSAttributedString.Key.accessibility SpeechQueueAnnouncement: true] let announcementString = NSAttributedString(string: notificationView.accessibilityLabel, attributes: announcementAttributes) UIAccessibility.post(notification: .announcement, argument: announcementString)
22. #accessibilityUpTo11 4 - Advanced Gestures The escape room
24. override func accessibilityPerformEscape() -> Bool { self.dismiss(animated: true, completion: nil) return true }
25. 4 - Advanced Gestures #accessibilityUpTo11 It’s a kind of magic
27. override func accessibilityPerformMagicTap() -> Bool { if player.isPlaying { player.pause() } else { player.play() } return true }
28. 5 - Accessibility Customizations #accessibilityUpTo11
30. if UIAccessibility. shouldDifferentiateWithoutColor { addColorSymbolsToCards() } NotificationCenter.default. addObserver(self, selector: #selector(addColorSymbolsToCards), name: NSNotification.Name(rawValue: UIAccessibility. differentiateWithoutColorDidChangeNo tification), object: nil)
31. 5 - Accessibility Customizations #accessibilityUpTo11 Reduce Transparency Reduce Motion Bold Text On/Off Switch Labels Button Shapes Prefer Cross-Fade Transitions
32. 6 - Custom Actions #accessibilityUpTo11 From 1st post to 3rd post: → User → Text → Repost → Like → Share → User → Text → Repost → Like → Share → 11 Swipes (+ redundant information) vs 3 Swipes vs → User + Text → User + Text →
34. accessbilityCustomActions = [UIAccessibilityCustomAction(name: like, target: self, selector: #selector(likeButtonPressed(_:))), UIAccessibilityCustomAction(name: share, target: self, selector: #selector(shareButtonPressed(_:)))]
35. 6 - Custom Actions #accessibilityUpTo11 Switch Control
36. 7 - Voice Control #accessibilityUpTo11 Tap Settings Tap Configuration Tap Cog Button
38. settingsButton. accessibilityUserInputLabels = ["settings", "configuration", "cog"]
39. 8 - Big #accessibilityUpTo11
41. subtitleLabel.font = UIFont.preferredFont(forTextStyle: .body) subtitleLabel .adjustFontForContentSizeCategory = true subtitleLabel.numberOfLines = 0 titleLabel.font = UIFontMetrics(forTextStyle: .title1) .scaledFont(for: customFont)
42. 8 - Big #accessibilityUpTo11
43. 8 - Big #accessibilityUpTo11
44. 9 - Alternative Layout #accessibilityUpTo11
46. if traitCollection .preferredContentSizeCategory .isAccessibilitySizeCategory { cell = tableView .dequeueReusableCell( withIdentifier: “alternativeCellId”, for: indexPath) } else { cell = tableView .dequeueReusableCell( withIdentifier: “defaultCellId”, for: indexPath) }
47. 9 - Alternative Layout #accessibilityUpTo11
48. 10 - Come to the Dark Side #accessibilityUpTo11
49. 10 - Come to the Dark Side #accessibilityUpTo11
50. 10 - Come to the Dark Side #accessibilityUpTo11
52. imageView .accessibilityIgnoresInvertColors = true
53. 11 - Test!!! #accessibilityUpTo11
54. #accessibilityUpTo11 11 - Test!!! • Screen Curtain • Environment Overrides • Shortcuts
55. #accessibilityUpTo11 Accessibility → Up to 11! Dani Devesa (@dadederk) GitHub code examples: https://github.com/Apress/developing-accessible-iOS-apps