Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UIKonf 2017: Accessibility for Users, Designers...

UIKonf 2017: Accessibility for Users, Designers & Developers

Looking at accessibility on iOS from 3 perspectives: users, designers, and devs. What assistive technology is build into iOS devices for users? What other technologies are the devices compatible with? How should designers think about making their designs inclusive of all users? How can devs best make sure they're writing UIs that are accessible to everyone?

Sommer Panage

May 17, 2017
Tweet

More Decks by Sommer Panage

Other Decks in Technology

Transcript

  1. AN ASSISTIVE TECHNOLOGY IS ANY ITEM, PIECE OF EQUIPMENT OR

    PRODUCT SYSTEM THAT IS USED TO INCREASE, MAINTAIN OR IMPROVE THE FUNCTIONAL CAPABILITIES OF A PERSON WITH A DISABILITY.
  2. ACCESSIBLE DESIGN IS GOOD DESIGN - IT BENEFITS PEOPLE WHO

    DON'T HAVE DISABILITIES AS WELL AS PEOPLE WHO DO. ACCESSIBILITY IS ALL ABOUT REMOVING BARRIERS AND PROVIDING THE BENEFITS OF TECHNOLOGY FOR EVERYONE. Steve Ballmer WHY?
  3. VISION VOICEOVER - OTHER THINGS TO CONSIDER ▸ Avoid images

    with text ▸ Support standard gestures (back, scroll, etc) on touch devices ▸ Try to avoid “discoverable” things…interactions should be obvious! ▸ Design an experience - don’t just label things!
  4. 44 minutes ago One nice thing about 2013 has been

    not having to hear Pumped Up Kicks very often. At rooland. Reply Retweet Favorite Jordan Kay At underscore Jordan Profile Picture EQUAL EXPERIENCES
  5. “Jordan Kay. At Underscore Jordan. 44 minutes ago. One nice

    thing about 2013 has been not having to hear Pumped Up Kicks very often. Dash. At Roooooland. Two-finger double-tap for tweet actions.” EQUAL EXPERIENCES
  6. class MyView: UIView { let titleLabel: UILabel = { let

    l = UILabel() l.adjustsFontForContentSizeCategory = true l.font = .preferredFont(forTextStyle: .title1) return l }() init() { super.init(frame: .zero) NotificationCenter.default.addObserver(self, selector: #selector(userChangedTextSize), name: NSNotification.Name.UIContentSizeCategoryDidChange, object: nil) } // etc… }
  7. class MyView: UIView { let titleLabel: UILabel = { let

    l = UILabel() l.adjustsFontForContentSizeCategory = true l.font = .preferredFont(forTextStyle: .title1) return l }() init() { super.init(frame: .zero) NotificationCenter.default.addObserver(self, selector: #selector(userChangedTextSize), name: NSNotification.Name.UIContentSizeCategoryDidChange, object: nil) } // etc… }
  8. class MyView: UIView { let titleLabel: UILabel = { let

    l = UILabel() l.adjustsFontForContentSizeCategory = true l.font = .preferredFont(forTextStyle: .title1) return l }() init() { super.init(frame: .zero) NotificationCenter.default.addObserver(self, selector: #selector(userChangedTextSize), name: NSNotification.Name.UIContentSizeCategoryDidChange, object: nil) } // etc… }
  9. VISION VISUAL DESIGN - OTHER CONSIDERATIONS ▸ Tap targets should

    be no smaller than 44x44 points ▸ Keep color schemes simple ▸ Avoid clutter…again! (always)
  10. THE AUDIT SPOTIFY — GOOD! ▸ Buttons are well labeled

    ▸ Grouping of content makes sense ▸ Navigation of music control is clear ▸ Buttons provide context to their behaviors when non-obvious
  11. THE AUDIT MEDIUM — NOT GREAT ▸ Tabs aren’t labeled

    ▸ Swipe items behind cells are “visible” to VO ▸ Grouping of items is poor ▸ Compose items aren’t labeled ▸ Doesn’t respond to back gesture. ▸ And much more… ▸ NOTE: This is an old version of Medium - app is MUCH better now!
  12. UIACCESSIBILITY YOUR ANSWERS FOR UIACCESSIBILITY ▸Label / name of item

    ▸Link / button / heading / other traits ▸Frame
  13. A REAL APP! DEMO APP ▸ Code at goo.gl/nCCw8I ▸

    For children ▸ Learning numbers, colors and shapes ▸ We will focus on VoiceOver support
  14. A REAL APP! WHAT IS THIS? ▸ No clear indication

    that the “learn” cells are tappable ▸ Tap + nav -> generally button behavior
  15. A REAL APP! SOLUTION: UIACCESSIBILITYTRAIT ▸ UIAccessibilityTraits answer WHAT something

    is / HOW it behaves ▸ Common traits: ▸ - UIAccessibilityTraitButton ▸ - UIAccessibilityTraitHeader ▸ - UIAccessibilityTraitLink ▸ - UIAccessibilityTraitImage ▸ UIAccessibilityTraitAdjustable
  16. A REAL APP THE CODE func tableView(_ tableView: UITableView, cellForRowAt

    indexPath: IndexPath) -> UITableViewCell { let cell: UITableViewCell // Set up the cell based on my data cell.accessibilityTraits |= UIAccessibilityTraitButton return cell }
  17. A REAL APP UIACCESSIBILITYTRAITS ▸ Standardized behavior communication ▸ Localized

    ▸ Standardized interaction patterns (i.e. adjustable) ▸ Hook into VO navigation
  18. A REAL APP! WHO IS THIS? ▸ Images take on

    resource or file names by default ▸ Name should be short and clear ▸ When combined with trait, name indicates interaction
  19. A REAL APP! SOLUTION: UIACCESSIBILITYLABEL ▸ AccessibilityLabel answer WHO something

    is ▸ AccessibilityHint answers what will happen if I perform an action on the element ▸ Hints used when that result is not obvious from the label ▸ Hint read after pause ▸ Hints can be turned off AND UIACCESSIBILITYHINT
  20. A REAL APP THE CODE let englishButton: UIButton = {

    let button = UIButton(type: .system) button.setBackgroundImage( #imageLiteral(resourceName:”union_jack") .withRenderingMode(.alwaysTemplate), for: .normal) button.accessibilityLabel = "English Answer" button.accessibilityHint = "Shows the answer in English" return button }()
  21. A REAL APP ACCESSIBILITYLABEL AND ACCESSIBILITYHINT ▸ Need to be

    localized ▸ Hint is additional and optional, user may not hear ▸ Label should be short and clear ▸ Label/Hints should NOT contain trait info ▸ Hint begins with a VERB, should NOT contain action such as “tapping” unless it is a custom action
  22. A REAL APP! HOW DO I GET THERE? ▸ VO

    supports default gestures for common behaviors ▸ 3-finger scroll ▸ 2-finger Z to escape ▸ “Magic tap” 2 finger double tap - most “common” or expected action
  23. A REAL APP! SOLUTION: ACCESSIBILITY PERFORM ESCAPE ▸ 2 finger-Z

    to “go back” or “escape” ▸ Automatically supported by UINavigationController ▸ Must be implemented manually for modals
  24. A REAL APP THE CODE final class AnswerViewController: UIViewController {

    // All the usually VC code here… @objc private func didSelectGotIt() { dismiss(animated: true, completion: nil) } override func accessibilityPerformEscape() -> Bool { didSelectGotIt() return true } }
  25. A REAL APP GESTURES AND ACTIONS ▸ Avoid custom gestures;

    try to use standard escape, magic tap and scroll, plus the adjustable (trait) ▸ Custom actions via accessibilityCustomActions ▸ Custom navigation via the accessibilityCustomRotors
  26. ACCESSIBILITY ADVOCACY EVERYONE CAN BE AN ADVOCATE ▸ We all

    want the same things: ▸ An app that anyone can use ▸ An app that is easy to use ▸ Happy users! ▸ Not everyone is a power user ▸ If you see something, say something!
  27. ACCESSIBILITY ADVOCACY APPEALING TO THE POWERS THAT BE ▸ Accessibility

    helps with Automation ▸ Accessibility means more users with AND WITHOUT disabilities ▸ Accessibility is good PR ▸ Accessibility offers TONS of space for innovation ▸ Stay ahead of the law ▸ Accessibility is the right thing to do
  28. ACCESSIBILITY ADVOCACY NUMBERS - BLESSING AND CURSE ▸ “Just how

    many blind people use our app?” ▸ Privacy - do we track users of assistive tech? ▸ TALK TO YOUR USERS
  29. OTHER CHALLENGES CAPTIONING AND SOUND ▸ All audio/video content should

    provide optional captioning ▸ Never signal anything with sound alone ▸ Avoid background music/sound and make any background sound easy to disable
  30. OTHER CHALLENGES TOUCH AND COGNITION ▸ Avoid complex / hard

    to discover gestures ▸ Again, keep touch target sizes at/above 44x44 points ▸ Test your interface using switch control; a simple, hierarchical interface will play well with switch control ▸ Avoid screen clutter - favor navigation to clutter