Real World Accessibility

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

Transcript

1. Accessibility in the Real World Sommer Panage (@sommer)
2. Accessibility means using technology to overcome challeneges.
7. It looked so easy...
12. The Ugly Tweetling
13. Once upon a time...
17. According to the rules... EVERYTHING THAT ISN'T ALREADY TEXT MUST HAVE A LABEL, AND TEXT MUST BE ACCESSIBLE TO VOICEOVER.
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
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...
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)
39. Where to put the actions?
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...
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!
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.
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!
78. Thank you so much!
79. Don't hesitate to reach out: Sommer Panage me@sommerpanage.com @sommer on Twitter