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

Real World Accessibility

2810cabe68408b63cbdc4ba1cb138b9d?s=47 Sommer Panage
September 15, 2017

Real World Accessibility

3 stories for working in the accessibility space in real companies. Talk delivered at NSSpain 2017

2810cabe68408b63cbdc4ba1cb138b9d?s=128

Sommer Panage

September 15, 2017
Tweet

Transcript

  1. Accessibility in the Real World Sommer Panage (@sommer)

  2. Accessibility means using technology to overcome challeneges.

  3. None
  4. None
  5. None
  6. None
  7. It looked so easy...

  8. None
  9. None
  10. None
  11. None
  12. The Ugly Tweetling

  13. Once upon a time...

  14. None
  15. None
  16. None
  17. According to the rules... EVERYTHING THAT ISN'T ALREADY TEXT MUST

    HAVE A LABEL, AND TEXT MUST BE ACCESSIBLE TO VOICEOVER.
  18. None
  19. None
  20. None
  21. None
  22. extension Date { private static let timestampFormatter: DateComponentsFormatter = {

    let formatter = DateComponentsFormatter() formatter.allowedUnits = [.day, .hour, .minute, .second] formatter.unitsStyle = .abbreviated formatter.maximumUnitCount = 1 return formatter }() var visualTimestamp: String { let now = Date() return Date.timestampFormatter.string(from: self, to: now)! } }
  23. extension Date { private static let visualTimestampFormatter: DateComponentsFormatter = {

    let formatter = DateComponentsFormatter() formatter.allowedUnits = [.day, .hour, .minute, .second] formatter.unitsStyle = .abbreviated formatter.maximumUnitCount = 1 return formatter }() private static let audioTimestampFormatter: DateComponentsFormatter = { let formatter = DateComponentsFormatter() formatter.allowedUnits = [.day, .hour, .minute, .second] formatter.unitsStyle = .full formatter.maximumUnitCount = 1 return formatter }()
  24. . . . var visualTimestamp: String { let now =

    Date() return Date.visualTimestampFormatter.string(from: self, to: now)! } var audioTimestamp: String { let now = Date() return Date.audioTimestampFormatter.string(from: self, to: now)! } } let myLastBirthday = Date(timeIntervalSinceNow: -6048000) myLastBirthday.visualTimestamp // 70d myLastBirthday.audioTimestamp // 70 days let sixSecondsAgo = Date(timeIntervalSinceNow: -6) sixSecondsAgo.visualTimestamp // 6d sixSecondsAgo.audioTimestamp // 6 days
  25. And voila! let timestampLabel = UILabel() timestampLabel.text = tweetDate.visualTimestamp timestampLabel.accessibilityLabel

    = tweetDate.audioTimestamp
  26. None
  27. None
  28. None
  29. None
  30. It's “accessible” but... • I cannot tell when I am

    on a favorite or retweet button which tweet I'd be favoriting or retweeting. • A lot of the information is useless and redundant: • Saying "profile picture" for every profile picture gets annoying • Having to swipe thru all the buttons for every tweet is annoying
  31. • With swipe navigation it takes up to 9 or

    10 swipes just to get thru one tweet. • It is hard to get a quick summary of the timeline by swiping thru it - want to be able to swipe thru 1 tweet at a time • This does not make for an good user experience. • And so on...
  32. None
  33. None
  34. None
  35. Tradeoffs • Not everything on screen is its own accessibilityElement,

    but the user has a more efficient experience • Interacting with tweets requires interactions beyond basic button activation, but we optimize for reading, which is the most common use case.
  36. The big questions • When synthesizing all the contents of

    a tweet into one string, what order does this information go in? What do I leave in and what do I take out? • How do I make the actions (retweet, like, etc.) easily accessible when they're not Accessibility Elements?
  37. One string to rule them all • Look at other

    apps • Talk to users • Talk with other accessibility advocates • Make the call (and maybe be wrong)
  38. None
  39. Where to put the actions?

  40. None
  41. None
  42. The moral of the story (1/2) Accessibility is more than

    reading onscreen text and providing labels.
  43. The moral of the story (2/2) Accessibility is about creating

    equal experiences rather than equal UI.
  44. Caught between an AB Test and a Hard Place

  45. Coordination on a single feature

  46. Coordination on a single feature

  47. Accessibility at a big company needs to: • Have a

    central point of contact and information. • Have its work distributed among all teams.
  48. The accessibility hub • Place where all teams can go

    for "accessibility questions" • Coordination of accessibility work with PMs, designers and engineers. • Advocates with to the top of the org-chart • Educators throughout the company • Accessibility-specific features
  49. The accessibility spokes • Designers coming up with VoiceOver copy

    • PMs budgeting time and engineering resources for accessibility work • Engineers writing the code to make a feature accessible • Top level organization members to prioritize accessibility at the org level
  50. A few features works great...

  51. Hundreds, not so much...

  52. ?!?!?!?!?!? ??? ?!?!?!?!

  53. bugs...Bugs...BUGS!

  54. Time for a tough choice...

  55. None
  56. None
  57. So many down sides • Forces VO users to work

    harder than non-VO users • Does not put VO user's voices into experiments • Is unprecedented in similar apps But one up side • The vast majority of the Twitter app is accessible
  58. The moral of the story Sometimes there is no (actionable)

    right answer; you just have to do your best. ...And sometimes you maybe get it wrong.
  59. Alice in Startupland

  60. Starting at the beginning at Chorus Fitness

  61. Priorities from Day 1: • Dynamic Type • High color

    contrast ratios • Simple interactions • Properly sized tap-targets.
  62. Bake accessibility in from the beginning!

  63. None
  64. None
  65. None
  66. Accessibility from the beginning • Consistent dialog with designers thru

    each design iteration • Investing early in app-wide accessibility like Dynamic Type and colors
  67. Accessibility from the beginning • Adding “no-brainer" accessibility to the

    code as I write it • Noting an accessibility plan for more complex UI but waiting until it's "for sure" to implement
  68. Caveat - - - - - - - - Staving

    off some accessibility work means making sure it is clear to everyone that before we can ship there will be some extra time required to lock down any incomplete accessibility implementations.
  69. But, Sommer?!?

  70. Staving off some accessibility work is a compromise that allows

    us to move faster BECAUSE we have no users.
  71. However, not having users DOES NOT mean we are not

    thinking about accessibility at every step.
  72. None
  73. None
  74. Accessibility is more than VoiceOver and Switches: it's a bridge

    for all users to your content and your mission.
  75. The moral of the story (1/2) Accessibility can be prioritized

    from the beginning in such a way that it doesn't slow down a speedy new startup (and doesn't drive the engineers bonkers).
  76. The moral of the story (2/2) Small start-ups are often

    in the exciting position to think of accessibility questions beyond their app!
  77. None
  78. Thank you so much!

  79. Don't hesitate to reach out: Sommer Panage me@sommerpanage.com @sommer on

    Twitter