Accessibility - Everyone is your user

This is a presentation made on Try! Swift NYC on 2017: https://www.tryswift.co/events/2017/nyc/#accessibility

Transcript

1. Accessibility @dev_jac
2. Accessibility Everyone is your user
3. Accessibility Accessibility ≠ Disability Accessibility ≠ Usability Enabling users with different needs
4. • Disabilities and Impairment • Age Related Conditions • Temporary Conditions • Customer Preferences Different needs https://msdn.microsoft.com/en-us/windows/desktop/gg712257.aspx
5. Are these your apps?
6. Are these your apps?
7. Are these your apps?
8. Are these your apps?
9. Are these your apps?
10. Where is accessibility?
13. 32 main options!
14. VoiceOver • Introduced with the iPhone 3GS • Includes: • “Voice over” • Basic gestures* • Braile support • Alternate input methods support • “Rotor”
15. VoiceOver • Introduced with the iPhone 3GS • Includes: • “Voice over” • Basic gestures* • Braile support • Alternate input methods support • “Rotor” Don’t activate it unless you know how to turn it off.
16. Switch Control • Alternative way of interacting with the touch screen. • Allows to use external input accessories. • Allows to control the iPhone with head movements. • Introduced on iOS 7. • Not as intrusive as voice over.
21. VoiceOver
22. VoiceOver How does it work? • Every meaningful element on the UI is selectable, either directly or by scanning. • Automatic scanning goes from top to bottom, from left to right
23. VoiceOver How does it work? If nothing is provided, the system will try to 
 • UIButton • Title / image file name
 • UILabel / UITextField / UITextView • The content
 • UIImage (if active) • File Name
 • UIProgressView / UISlider • Percentage

24. VoiceOver
25. VoiceOver For standard controls this is built right in
 But for a view of your own, we need your help for the win
 This isn't rocket science in some government facility
 So take a little time, and implement accessibility James Dempsey
 The Accessibility Song
26. VoiceOver What about non conventional UI?
27. • Composition of several UI elements
 • Custom implementation of drawRect • Non UIView (or SpriteKit) backed UI elements. I.E: CALayer
 • Interfaces that rely on gestures and not actual “GUI” VoiceOver What about non conventional UI?
28. VoiceOver UIAccessibilityContainer extension NSObject { open func accessibilityElementCount() -> Int open func accessibilityElement(at index: Int) -> Any? open func index(ofAccessibilityElement element: Any) -> Int // A list of container elements managed by the receiver. // This can be used as an alternative to implementing the dynamic methods. // default == nil @available(iOS 8.0, *) open var accessibilityElements: [Any]? // Some containers provide more context for accessibility elements, such as tables // Set this property so that assistive technologies can output more information. // default == UIAccessibilityContainerTypeNone @available(iOS 11.0, *) open var accessibilityContainerType: UIAccessibilityContainerType }
29. VoiceOver UIAccessibilityContainer extension NSObject { open func accessibilityElementCount() -> Int open func accessibilityElement(at index: Int) -> Any? open func index(ofAccessibilityElement element: Any) -> Int // A list of container elements managed by the receiver. // This can be used as an alternative to implementing the dynamic methods. // default == nil @available(iOS 8.0, *) open var accessibilityElements: [Any]? // Some containers provide more context for accessibility elements, such as tables // Set this property so that assistive technologies can output more information. // default == UIAccessibilityContainerTypeNone @available(iOS 11.0, *) open var accessibilityContainerType: UIAccessibilityContainerType }
30. VoiceOver UIAccessibilityElement @available(iOS 3.0, *) open class UIAccessibilityElement : NSObject, UIAccessibilityIdentification { // initialize with the accessibility container that contains this element public init(accessibilityContainer container: Any) unowned(unsafe) open var accessibilityContainer: AnyObject? open var isAccessibilityElement: Bool open var accessibilityLabel: String? open var accessibilityHint: String? open var accessibilityValue: String? open var accessibilityFrame: CGRect open var accessibilityTraits: UIAccessibilityTraits // When set, -[UIAccessibilityElement accessibilityFrame] will automatically adjust for the container's frame. // This can be useful when the element is a descendant of a scroll view, for instance. @available(iOS 10.0, *) open var accessibilityFrameInContainerSpace: CGRect }
31. VoiceOver UIAccessibilityElement @available(iOS 3.0, *) open class UIAccessibilityElement : NSObject, UIAccessibilityIdentification { // initialize with the accessibility container that contains this element public init(accessibilityContainer container: Any) unowned(unsafe) open var accessibilityContainer: AnyObject? open var isAccessibilityElement: Bool open var accessibilityLabel: String? open var accessibilityHint: String? open var accessibilityValue: String? open var accessibilityFrame: CGRect open var accessibilityTraits: UIAccessibilityTraits // When set, -[UIAccessibilityElement accessibilityFrame] will automatically adjust for the container's frame. // This can be useful when the element is a descendant of a scroll view, for instance. @available(iOS 10.0, *) open var accessibilityFrameInContainerSpace: CGRect }
32. VoiceOver UIAccessibilityElement @available(iOS 3.0, *) open class UIAccessibilityElement : NSObject, UIAccessibilityIdentification { // initialize with the accessibility container that contains this element public init(accessibilityContainer container: Any) unowned(unsafe) open var accessibilityContainer: AnyObject? open var isAccessibilityElement: Bool open var accessibilityLabel: String? open var accessibilityHint: String? open var accessibilityValue: String? open var accessibilityFrame: CGRect open var accessibilityTraits: UIAccessibilityTraits // When set, -[UIAccessibilityElement accessibilityFrame] will automatically adjust for the container's frame. // This can be useful when the element is a descendant of a scroll view, for instance. @available(iOS 10.0, *) open var accessibilityFrameInContainerSpace: CGRect }
33. 1.UIAccessibilityTraitNone 2.UIAccessibilityTraitButton 3.UIAccessibilityTraitLink 4.UIAccessibilityTraitHeader 5.UIAccessibilityTraitSearchField 6.UIAccessibilityTraitImage 7.UIAccessibilityTraitSelected 8.UIAccessibilityTraitPlaysSound 9.UIAccessibilityTraitKeyboardKey 10.UIAccessibilityTraitStaticText 11.UIAccessibilityTraitSummaryElement 12.UIAccessibilityTraitNotEnabled 13.UIAccessibilityTraitUpdatesFrequently 14.UIAccessibilityTraitStartsMediaSession 15.UIAccessibilityTraitAdjustable 16.UIAccessibilityTraitAllowsDirectInteraction 17.UIAccessibilityCausesPageTurn 18.UIAccessibilityTraitTabBar VoiceOver UIAccessibilityTraits
34. VoiceOver What about feedback?
35. VoiceOver We can publish notifications • UIAccessibilityScreenChangedNotification: Drastic change. • String: Text to read out loud • Element: To focus on
 • UIAccessibilityLayoutChangedNotification: Mild change • String: Text to read out loud • Element: To focus on
 • UIAccessibilityAnnouncementNotification: • String: Text to read out loud 
 public func UIAccessibilityPostNotification(_ notification: UIAccessibilityNotifications, _ argument: Any?)

36. Demo
37. https://github.com/Julioacarrettoni/ tryswiftnycAccessibilityDemo
38. Final Thoughts • When possible use native elements • Is not enough with it “looking like” the native element it also has to behave like one. • Don’t relay just on overlays to block interactivity • Don’t use “transparent” buttons. (<iOS 11) • Pay attention when using UIGestureRecognizers • Watch out for the name of the assets that we use in the app. • When in doubt, look at  for “inspiration” ;)
39. https://developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/iPhoneAccessibility/ Making_Application_Accessible/ Making_Application_Accessible.html
40. May these not be your apps
41. Some folks ain't got much use for bitmaps on screens
 They get the lay of the land through this alternate means
 If you want to build your app for maximum utility
 Then take a little time, implement accessibility James Dempsey
 The Accessibility Song
42. Some folks ain't got much use for bitmaps on screens
 They get the lay of the land through this alternate means
 If you want to build your app for maximum utility
 Then take a little time, implement accessibility James Dempsey
 The Accessibility Song It takes