Save 37% off PRO during our Black Friday Sale! »

VoiceOver Accessibility - Swift Delhi Chapter 20

VoiceOver Accessibility - Swift Delhi Chapter 20

VoiceOver does more than tell you what’s happening on your iPhone. It helps you make things happen. It gives you auditory descriptions of each onscreen element and provides helpful hints along the way — whether you prefer using gestures, a keyboard or a braille display. And it supports more than 30 languages, including multiple voice options.

But while creating those fancy custom views, we forget to support accessibility, which harms the app experience; and in the end, lose a number of users.

Link for the mockup videos in between - https://youtu.be/syUmZtojnIk

66aea9f5d4f707a913b69a665d36dc28?s=128

Rudrank Riyam

August 31, 2019
Tweet

Transcript

  1. VoiceOver Accessibility Making your apps accessible for everyone Rudrank Riyam,

     WWDC Scholarship Winner 2019 Swift Delhi Chapter 20 Presentation style inspired by WWDC © 2019 Apple Inc.
  2. Introduction to VoiceOver Accessibility Accessibility APIs with Implementation

  3. 285 Million people are visually impaired worldwide

  4. VoiceOver A screen reader that allows blind and low vision

    users to use the touch screen by audibly describing elements of the screen as they pan or swipe around it.
  5. Five key gestures are used: Swipe left or right to

    navigate to the next or previous UI element. One-finger double-tap to activate the selected element. Two-finger tap to stop and resume speaking. Swipe up with two fingers to read everything on screen. Three-finger triple-tap to turn screen curtain on and off.
  6. Benefits Designing for accessibility makes it easier to write functional

    tests. VoiceOver users are more likely to choose your app and recommend it to other VoiceOver users. It feels great to know that you are making a noticeable difference in someone’s life with your code.
  7. Accessibility Inspector Displays the information properties (and values), action methods,

    and position in the accessibility hierarchy of the object currently under the mouse pointer.
  8. None
  9. Determining Accessibility A Boolean value indicating whether the receiver is

    an accessibility element that an assistive application can access. var isAccessibilityElement: Bool
  10. Configuring an Accessibility Element

  11. var accessibilityLabel: String? var accessibilityHint: String? var accessibilityValue: String? var

    accessibilityViewIsModal: Bool var accessibilityElementsHidden: Bool var shouldGroupAccessibilityChildren: Bool var accessibilityTraits: UIAccessibilityTraits
  12. accessibilityLabel A succinct label that identifies the accessibility element, in

    a localised string. var accessibilityLabel: String?
  13. None
  14. navigationItem.leftBarButtonItem? .accessibilityLabel = “Preferences” navigationItem.rightBarButtonItem? .accessibilityLabel = “Create new Channel”

  15. None
  16. // MARK: Accessibility var showMoreButtonAccessibilityLabel: String? = “Show more options”

    var showLessButtonAccessibilityLabel: String? = “Show less options”
  17. if isLoginServicesCollapsed { collapsibleAuthSeparatorRow.showMoreButton .accessibilityLabel = showMoreButtonAccessibilityLabel } else {

    collapsibleAuthSeparatorRow.showMoreButton .accessibilityLabel = showLessButtonAccessibilityLabel }
  18. None
  19. accessibilityHint A brief description of the result of performing an

    action on the accessibility element, in a localised string. var accessibilityHint: String?
  20. None
  21. None
  22. titleLabel.accessibilityHint = “Double tap to open channel options” buttonServer.accessibilityHint =

    “Double tap to add or change server”
  23. None
  24. accessibilityValue The value of the accessibility element, in a localised

    string. var accessibilityValue: String?
  25. None
  26. func timeDuration(_ time: Int) -> String { let timeFormat =

    DateComponentsFormatter() timeFormat.allowedUnits = [.minute, .second] timeFormat.unitsStyle = .spellOut guard let formattedTime = timeFormat.string(from: Double(time)) else { return "" } return formattedTime }
  27. progressSlider.accessibilityValue = “Position, ” + timeDuration(Int(player.currentTime)) + “of, ” +

    timeDuration(Int(player.duration))
  28. None
  29. accessibilityViewIsModal A Boolean value indicating whether VoiceOver should ignore the

    elements within views that are siblings of the receiver. var accessibilityViewIsModal: Bool
  30. None
  31. serverView?.accessibilityViewIsModal = true

  32. accessibilityElementsHidden A Boolean value indicating whether the accessibility elements contained

    within this accessibility element are hidden. var accessibilityElementsHidden: Bool
  33. None
  34. None
  35. switch emoji { case .custom(let url): guard let url =

    url else { return } UImageManager.loadImage(with: url, into: emojiImageView) emojiImageView.isAccessibilityElement = true emojiImageView.accessibilityElementsHidden = false emojiLabel.accessibilityElementsHidden = true case .standard(let string): emojiLabel.text = string emojiLabel.accessibilityElementsHidden = false emojiImageView.accessibilityElementsHidden = true
  36. shouldGroupAccessibilityChildren A Boolean value indicating whether VoiceOver should group together

    the elements that are children of the receiver, regardless of their positions on the screen. var shouldGroupAccessibilityChildren: Bool
  37. None
  38. greyColumn.shouldGroupAccessibilityChildren = true blueBlock.isAccessibilityElement = false blueBlock.accessibilityElements = [key_9, key_8,

    key_6, key_5]
  39. accessibilityTraits The combination of accessibility traits that best characterise the

    accessibility element. var accessibilityTraits: UIAccessibilityTraits
  40. static var none static var button static var link static

    var searchField static var header static var selected static var staticText static var adjustable static var allowsDirectInteraction
  41. None
  42. cancelLabel.isAccessibilityElement = true cancelLabel.accessibilityTraits = .allowsDirectInteration cancelLabel.accessibilityLabel = “Swipe left

    to cancel”
  43. UIAccessibility.Notification A notification that an accessible application can send. struct

    Notification struct func post(notification: UIAccessibility.Notification, argument: Any?)
  44. layoutChanged Posted by an application when the layout of a

    screen changes, such as when an element appears or disappears. static var layoutChanged: UIAccessibility.Notification
  45. @objc func touchUpInsideDiscardButton() { UIAccessibility.post(notification: .layoutChanged, argument: composerView?.rightButton) }

  46. screenChanged Posted by an application when a new view appears

    that makes up a major portion of the screen. static var screenChanged: UIAccessibility.Notification
  47. UIAccessibility.post(notification: .screenChanged, argument: serversView)

  48. None
  49. NotificationsChooseCell.isAccessibilityElement = false pickerLabel.isAccessibilityElement = true UIAccessibility.post(notification: .screenChanged, argument: pickerLabel)

  50. None
  51. Contact Twitter : @rudrankriyam LinkedIn : @rudrankriyam GitHub : @rudrankriyam

    Instagram : @rudrankriyam