Building Apps for Everyone - AltConf

It is the moment you have been working so hard for. You press the ‘Submit’ button. Your app is now on its way to the App Store. In just a few days, your app is going to be available globally. But… is it really?

Any developer of an app with an aim of reaching a global audience needs to localise the app (most of us do that), but also to make it accessible! It is a team effort and everyone, from Developers to UX Designers or Product Managers, need to be involved, and therefore, to know its basics. In this talk we will try to provide a few techniques for improving those two areas of your apps from the points of view of the code, the use of tools we have available and the users’ expected experience.

A series of examples will be presented, showing how some of your users may perceive your app when localisation and accessibility are not correctly implemented or not implemented at all.

You would freak out if the ‘Back’ button was on the right side of the navigation bar, but that is what users that speak right-to-left written languages expect. If a modal view was presented without a ‘Close/Done’ button, you would consider it a bug, but it may exactly be what you are giving to blind users.

Smartphones, apps and the whole Apple ecosystem has helped us develop much more inclusive apps that anyone can use. But we can do better by building apps for everyone.

Transcript

1. BUILDING APPS FOR EVERYONE @dadederk
2. Superman - DC
3. @dadederk BUILDING APPS FOR EVERYONE
4. RTL LANGUAGES LOCALISATION & INTERNATIONALISATION
5. LOCALISATION & INTERNATIONALISATION RTL LANGUAGES
6. LOCALISATION & INTERNATIONALISATION RTL LANGUAGES let textAlignment: NSTextAlignment = NSTextAlignmentLeft let textAlignment: NSTextAlignment = NSTextAlignmentNatural
7. LOCALISATION & INTERNATIONALISATION RTL LANGUAGES • Autolayout: Leading and Trailing vs. Right and Left • NSLocale.characterDirection(forLanguage: langCode) • view.semanticContentAttribute = .playback, .spatial…
8. VERBOSE LANGUAGES LOCALISATION & INTERNATIONALISATION
9. LOCALISATION & INTERNATIONALISATION VERBOSE LANGUAGES
10. LOCALISATION & INTERNATIONALISATION VERBOSE LANGUAGES
11. THE BASICS ACCESSIBILITY
12. ACCESSIBILITY THE BASICS Inclusive - Microsoft Design
13. ACCESSIBILITY THE BASICS // Do I serve a purpose? accessibleView.isAccessibilityElement = true // What is my name? accessibleView.accessibilityLabel = NSLocalizedString("accessibility.done_button", comment: "") // What is my personality? accessibleView.accessibilityTraits = UIAccessibilityTraitButton // What is my value? accessibleView.accessibilityValue = NSLocalizedString("accessibility.done_button_value", comment: "") // Where I am? accessibleView.accessibilityFrame = UIAccessibilityConvertFrameToScreenCoordinates(accessibleView.frame, view)
14. ACCESSIBILITY THE BASICS
15. THE BLINDFOLD TEST ACCESSIBILITY
16. ACCESSIBILITY THE BLINDFOLD TEST
17. A MODAL VIEW WITHOUT A CLOSE BUTTON ACCESSIBILITY
18. ACCESSIBILITY A MODAL VIEW WITHOUT A CLOSE BUTTON override func accessibilityPerformEscape() -> Bool { self.dismiss(animated: true, completion: nil) return true }
19. ACCESSIBILITY A MODAL VIEW WITHOUT A CLOSE BUTTON
20. THE MAGIC TAP ACCESSIBILITY
21. ACCESSIBILITY THE MAGIC TAP override func accessibilityPerformMagicTap() -> Bool { player.play() return true }
22. GO TO SECTION TWO… ACCESSIBILITY
23. ACCESSIBILITY GO TO SECTION TWO… titleLabel.accessibilityTraits = UIAccessibilityTraitHeader
24. ACCESSIBILITY GO TO SECTION TWO…
25. YOU MISSPELLED THAT! ACCESSIBILITY
26. ACCESSIBILITY YOU MISSPELLED THAT! "accessibilitylabel.live" = "Lyve"; "accessibilitylabel.mostread" = "Most Red";
27. JOIN THE DARK SIDE ACCESSIBILITY
28. ACCESSIBILITY JOIN THE DARK SIDE
29. ACCESSIBILITY JOIN THE DARK SIDE // iOS 11 darkView.accessibilityIgnoresInvertColors = true // Before iOS 10 NotificationCenter.default.addObserver(self, selector: #selector(accessibilityInvertedColorsChanged), name: Notification.Name.UIAccessibilityInvertColorsStatusDidChange, object: nil) @objc func accessibilityInvertedColorsChanged() { if UIAccessibilityIsInvertColorsEnabled() { // Invert colors of your view } }
30. A TINY FONT SIZE ACCESSIBILITY
31. ACCESSIBILITY A TINY FONT SIZE
32. ACCESSIBILITY A TINY FONT SIZE
33. ACCESSIBILITY A TINY FONT SIZE let label = UILabel() label.font = UIFont.preferredFont(forTextStyle: .body)
 
 // New in iOS 10 label.adjustsFontForContentSizeCategory = true 
 // New in iOS 11 let font = UIFont(name: fontName, size: fontSize) let fontMetrics = UIFontMetrics(forTextStyle: .body) label.font = fontMetrics.scaledFont(for: font!)
34. ACCESSIBILITY A TINY FONT SIZE iOS 10 iOS 11
35. USING THE APP WITH A MAGNIFIER GLASS ACCESSIBILITY
36. LOCALISATION & INTERNATIONALISATION USING THE APP WITH A MAGNIFIER GLASS
37. THE APP WITH A SINGLE BUTTON ACCESSIBILITY
38. BUILDING APPS FOR EVERYONE AND MUCH MORE… CAPTIONS DICTATION CONTRAST RATIO ZOOM GUIDED ACCESS ASSISTIVE TOUCH TOUCH ACCOMMODATIONS
39. BUILDING APPS FOR EVERYONE WHERE TO GO FROM HERE ‣ iOS Accessibility: https://developer.apple.com/videos/play/ wwdc2015/201/ ‣ Sally Shepard - Accessibility: Beyond VoiceOver: https:// youtu.be/4lzP1SsCcyw ‣ UIKonf 2017 – Day 2 – Sommer Panage – Accessibility: iOS for All: https://www.youtube.com/watch?v=G01Ac5njNSs ‣ What's New in Accessibility: https://developer.apple.com/ videos/play/wwdc2017/215
40. BUILDING APPS FOR EVERYONE WHERE TO GO FROM HERE ‣ Convenience for You is Independence for Me: https:// developer.apple.com/videos/play/wwdc2017/110/
41. Daredevil - Marvel
42. BUILDING APPS FOR EVERYONE THANKS!!! @DADEDERK