Mind Mapping for All of Us - The Power of Making Your App Accessible

An inspirational talk about the importance of making apps accessible to users with disabilities, given at #Pragma Conf 2016 in Verona, Italy.

Related Blog Post: http://mindnode.com/blog/2016-06-29-making-mindnode-accessible

Transcript

1. * Mind Mapping = central idea +
   connect related thoughts, radiant
   thinking
   * advantages:
   - visual overview
   - group related concepts
   - easy to grasp whole picture
   MIND MAPPING
   

   View Slide

2. * introduced by British Psychologist Tony
   Buzan
   * visual tool to help you organize your thoughts
   A Mind Map is a visual and graphic
   Holistic Thinking Tool.
   — Tony Buzan
   

   View Slide

3. * Questions that come up: how should this work, why would
   Mind Mapping be of interest for visually impaired people?
   Hi, I'm a visually impaired user of
   Apple products & I'm wondering if
   your app works with VoiceOver?
   — Jessica
   

   View Slide

4. * perfectly normal use case: write down ideas &
   organize thoughts
   * realization: visually impaired users think visually too
   I'd like to write an autobiography,
   and need a place to write down my
   ideas and construct chapters.
   — Jessica
   

   View Slide

5. MIND MAPPING
   FOR ALL OF US
   THE POWER OF MAKING YOUR APP
   ACCESSIBLE
   

   View Slide

6. Several reasons:
   * easy: you can get the basics done in a
   few hours
   * increase user base
   (WHO: 285 million visually impaired
   people worldwide, 39 million blind)
   * UI Testing
   WHY SHOULD WE CARE?
   

   View Slide

7. * Main Reason: empathy
   * unique chance for developers: improve the lives of
   millions of people
   * Smartphone + Accessibility = live-changing for
   people with disabilities (empowerment, independence)
   * Goal: equal experience for all users, regardless of
   disabilities
   BECAUSE IT'S THE RIGHT
   THING TO DO!
   

   View Slide

8. ACCESSIBILITY MYTHS*
   * http://mattgemmell.com/accessibility-for-iphone-and-ipad-apps/
   

   View Slide

9. * very common belief
   * we implicitly assume most extreme case
   * reality: entire spectrum [corrective lenses
   -> complete blindness]
   * needs of partially-sighted users wildly
   differ from blind users
   MYTH 1
   VISUALLY IMPAIRED USERS ARE BLIND.
   

   View Slide

10. * use of memory of location
    * once you remember location of a control,
    you don't scan the whole screen
    MYTH 2
    VISUALLY IMPAIRED USERS ACCESS THINGS
    SEQUENTIALLY.
    

    View Slide

11. * listen to just enough to orient themselves
    * labels should be as short as possible:
    concise, not verbose
    * users don't want to read a book, they
    want to use your app
    * it's all about efficiency
    MYTH 3
    VISUALLY IMPAIRED USERS LISTEN TO ALL
    ON-SCREEN TEXT.
    

    View Slide

12. * wide range of accessibility technologies:
    * localization, RTL, Dynamic Type, Bold Text,
    Reduced Motion, Reduced Transparency,...
    * VoiceOver = Screen Reader
    * turns your whole screen into an input area
    * reads out stuff that's under your finger
    (focused)
    VOICEOVER
    

    View Slide

13. * easiest way to enable VoiceOver
    * turn on/off: triple-click home button
    SETTINGS > GENERAL >
    ACCESSIBILITY
    

    View Slide

14. * tap or pan around screen = change focus
    * black rectangle indicates focus
    CHANGE FOCUS
    SINGLE TAP
    

    View Slide

15. * to activate currently focused element
    double tap anywhere on screen
    * = single-tap in normal mode
    * calls "func accessibilityActivate() -> Bool"
    ACTIVATE
    DOUBLE TAP
    

    View Slide

16. * moves focus to the previous or next element
    on screen
    * good way to explore screen
    * order of elements is very important
    (UIAccessibilityContainer)
    CHANGE FOCUS
    SEQUENTIALLY
    SWIPE LEFT/RIGHT
    

    View Slide

17. * Magic Tap is optional, triggers the most important
    action in your app
    * e.g. phone app: take incoming call, music app: play/
    pause music, camera app: take picture
    MOST IMPORTANT ACTION
    2-FINGER DOUBLE TAP
    

    View Slide

18. you can find a detailed blog post with before/after video comparison at
    http://mindnode.com/blog/2016-06-29-making-mindnode-accessible
    VIDEO
    

    View Slide

19. * framework provided by Apple
    * allows us to provide accessibility information
    about UI elements
    * this information is then used by VoiceOver &
    other assistive technologies
    * at the heart: informal protocol on NSObject:
    NSObject(UIAccessibility)
    UIAccessibility
    

    View Slide

20. * single most important tool
    * it's what VoiceOver reads out first (compare with
    Myth #3)
    * rules:
    - as short as possible, single word
    - don't include type of control -> accessibilityTraits
    - localized
    - Starts with a capitalized Word
    - Does not end with a period
    - More: http://developer.apple.com/library/ios/
    #documentation/UserExperience/Conceptual/
    accessibilityLabel
    "WHAT'S MY NAME?"
    

    View Slide

21. * Possibility to specify language a text
    should be read in
    * e.g. Company/Personal/App Names
    accessibilityLanguage
    "WHAT'S MY NATIVE LANGUAGE?"
    

    View Slide

22. * if not, this is how iCloud Drive sounds in German
    * sometimes not feasible to specify the language
    (localization workflow)
    "iCloud Drive"
    

    View Slide

23. * fake it 'til you make it!
    * make sure string is only used for
    VoiceOver and not displayed on screen
    "iCloud Dhraif"
    

    View Slide

24. lots of other properties to check out:
    * hint: what happens when you
    trigger me?
    * traits: what`s my personality?
    * frame/path: where am I?
    * value: what's my value?
    accessibilityHint
    accessibilityTraits
    accessibilityFrame/Path
    accessibilityValue
    ... AND MANY MORE ...
    

    View Slide

25. * think of it as a context menu for objects on screen
    * can make the difference between an accessible
    app, and a really great to use app with VoiceOver
    UIAccessibilityCustomAction
    "RIGHT-CLICK MENU"
    

    View Slide

26. * Example: Browsing a Website.
    - Sighted users don't read the whole screen top to
    bottom, they scan for images, headlines, links, ...
    - the Rotor allows visually impaired people to
    perform the same workflow: skim through content
    * can be shown by rotating fingers on screen
    * new in iOS 10: custom rotors - you can add your
    own categories
    UIAccessibilityCustomRotor
    "WHAT'S ON THIS PAGE?"
    

    View Slide

27. DEMO
    

    View Slide

28. * challenge: take a selfie with VoiceOver enabled
    1. activate VoiceOver with triple-click on home
    button
    2. select time in status bar
    3. 3-finger swipe up to show control center
    4. 3-finger triple tap to enable "Screen
    Curtain" (turns screen off)
    5. find camera icon
    6. activate camera app
    7. change camera to selfie camera
    TAKE A SELFIE!
    

    View Slide

29. the power of making your app accessible = being able to answer these kind of
    questions with YES & knowing that it improves the lifes of so many people out there
    Hi, I'm a visually impaired user of
    Apple products & I'm wondering if
    your app works with VoiceOver?
    — Jessica
    

    View Slide

30. THANK YOU!
    FOLLOW @myell0w
    

    View Slide