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

Cocoaheads Stockholm: 10 Accessibility Tips for...

Cocoaheads Stockholm: 10 Accessibility Tips for iOS

Sommer Panage

April 16, 2018
Tweet

More Decks by Sommer Panage

Other Decks in Technology

Transcript

  1. I MADE MY APP MORE ACCESSIBLE, AND YOU WON’T BELIEVE

    WHAT HAPPENED NEXT! SOMMER PANAGE @SOMMER CocoaHeads ! Stockholm
  2. WHO AM I? ! iOS Developer, previously at Chorus, Twitter,

    Apple ! Aerial (circus) performer and coach CocoaHeads ! Stockholm
  3. WHO AM I? ! iOS Developer, previously at Chorus, Twitter,

    Apple ! Aerial (circus) performer and coach ! Health and fitness lover CocoaHeads ! Stockholm
  4. WHO AM I? ! iOS Developer, previously at Chorus, Twitter,

    Apple ! Aerial (circus) performer and coach ! Health and fitness lover ♿ Accessibility engineer and advocate! CocoaHeads ! Stockholm
  5. YOU TO WALK AWAY WITH REAL AND ACTIONABLE ADVICE THAT

    YOU CAN IMPLEMENT TOMORROW TO MAKE YOUR APP MORE ACCESSIBLE. CocoaHeads ! Stockholm
  6. IN THIS TALK, WE WILL COVER 10 LIGHT-WEIGHT TIPS THAT

    WILL LET YOU MAKE YOUR APP MORE ACCESSIBLE RIGHT NOW. CocoaHeads ! Stockholm
  7. Minimum, we want a contrast ratio of 4.5:1 for normal

    text and 3:1 for large text (Large text is 14 pt bold or 18 pt non-bold) CocoaHeads ! Stockholm
  8. WHAT'S GOING ON HERE? > Dynamic Type: Use text styles

    with preferredFontForTextStyle > Dynamic Type: Use adjustsFontsForContent SizeCategory on UILabel, UITextView, etc. CocoaHeads ! Stockholm
  9. WHAT'S GOING ON HERE? > Use AutoLayout so text can

    wrap and expand its container > BONUS: see preferredContentSizeCategory on UIApplication to change layout when needed CocoaHeads ! Stockholm
  10. > Low-vision users > Elderly users > Any users with

    text size preferences! CocoaHeads ! Stockholm
  11. TAP TARGETS SHOULD BE... > At least 44x44 pts (in

    other words, about 9 mm sq) > At least 32 pts apart CocoaHeads ! Stockholm
  12. AND, SERIOUSLY, HAVE YOU EVER TRIED TO TAP THE USER

    NAME OF SOMEONE WHO "LIKED" YOU PICTURE ON INSTAGRAM?!?! CocoaHeads ! Stockholm
  13. UIKIT PROVIDES LOTS OF BUILT IN ACCESSIBILITY FOR FREE! >

    Controls have the correct traits for VoiceOver > Navigation gestures "just work!" > Users are accustomed to these standard behaviors! CocoaHeads ! Stockholm
  14. In the end, if you do build your own UI

    component, be sure it's as accessible as the Apple version! CocoaHeads ! Stockholm
  15. > We don't know the best way in which to

    communicate to our users. > Might be visual or auditory? > Might be color or placement? > When we need to communicate important info, it's best to use multiple modes CocoaHeads ! Stockholm
  16. IN OTHER WORDS... > Pair an auditory cue with a

    visual one! > Within your visual cues, use both color and placement/ content/style change > Also consider haptics > Announce information via VoiceOver's UIAccessibilityPostNotification CocoaHeads ! Stockholm
  17. IMAGES ARE EITHER... > Provided by your users (i.e. Instagram)

    > Conveying information (i.e. tab bar images) > Decorative only (i.e. non-actionable logo) CocoaHeads ! Stockholm
  18. > No VoiceOver support for free > The text size

    won't scale > Localization CocoaHeads ! Stockholm
  19. USING VOICEOVER > Swipe or slide finger to move >

    Double-tap to select > 3-finger swipe to scroll Try Settings ➡ General ➡ Accessibility ➡ VoiceOver ➡ VoiceOver Practice You must turn on VoiceOver first CocoaHeads ! Stockholm
  20. TOP 4 TESTS 1. Can you navigate everywhere in your

    app? 2. Can you tap every tappable thing? 3. Can you hear every bit of text? 4. Can you hear every image that conveys information? CocoaHeads ! Stockholm
  21. IS THE CURSOR NOT FINDING SOMETHING? This can usually be

    fixed by toggling isAccessibilityElement CocoaHeads ! Stockholm
  22. IS SOMETHING NOT SPEAKING THE CORRECT NAME? This can usually

    be fixed by correctly setting accessibilityLabel CocoaHeads ! Stockholm
  23. > Blind and visually impaired users > Switch system users

    > Automation also! CocoaHeads ! Stockholm
  24. IN MORE CONCRETE TERMS... > Favor navigation over a complex

    UI > Keep color schemes simple CocoaHeads ! Stockholm
  25. GESTURES CAN MAKE APPS FEEL... > unique! > fun! >

    content-focused! CocoaHeads ! Stockholm
  26. GESTURE ALSO... > must be discovered or taught > require

    memorization > often require dexterity > frequently don't "tell" you if do it wrong > aren't consistent across apps CocoaHeads ! Stockholm
  27. THINK OF GESTURES AS POWER FEATURES > They should make

    things easier. > They should help users save time. > There should be a simpler way to do the same thing CocoaHeads ! Stockholm
  28. VOICEOVER > Conflicts with VoiceOver Gestures > Some gestures have

    custom VoiceOver versions CocoaHeads ! Stockholm
  29. Often, we don't have someone in house who is blind

    or low-vision or hard of hearing or has a motor impairment or... CocoaHeads ! Stockholm
  30. WHY? > Our users want to use our product. >

    Our users, especially those of different abilities, offer unique perspectives. > If our product isn't for all of our users, then who is it for exactly? CocoaHeads ! Stockholm
  31. 1. Have high color contrast ratios. 2. Use Dynamic Type

    & AutoLayout. CocoaHeads ! Stockholm
  32. 3. Don't make people tap tiny things. 4. Use standard

    UIKit components whenever possible. CocoaHeads ! Stockholm
  33. 5. Communicate dynamic information using multiple modes. 6. Images are

    images. Text is text. CocoaHeads ! Stockholm
  34. 9. Don't overdo it with gestures. 10. Talk to and

    listen to your users. CocoaHeads ! Stockholm
  35. MAKING YOUR APP MORE ACCESSIBLE DOES NOT REQUIRE YOU TO

    BE AN ACCESSIBILITY EXPERT! CocoaHeads ! Stockholm
  36. STATS AND DATA > https://www.powermapper.com/blog/website-accessibility- disability-statistics/ > http://www.who.int/disabilities/world_report/2011/ report/en/ >

    https://siteimprove.com/en-us/blog/why-web- accessibility-should-be-a-priority-now-3-stats-to-prove- it/ > https://www.w3.org/WAI/bcase/resources CocoaHeads ! Stockholm
  37. OTHER TALKS ON IOS ACCESSIBILITY > https://www.youtube.com/watch?v=G01Ac5njNSs > https://www.youtube.com/watch?v=-fgSOStivSE >

    https://www.youtube.com/watch?v=4lzP1SsCcyw > https://www.youtube.com/watch?v=lCvUwkjgkhU CocoaHeads ! Stockholm