Designing APIs: How to ensure accessibility in design system components

Presentation for Pragma Conference, October 2024 in Bologna, Italy.

Explore design systems with a focus on accessibility, understand abstraction levels, and learn best practices for API design. Bonus: a live demo will be included at the end.

Today, most apps use some form of a design system with shared UI components, allowing you to quickly create new features that fit your app’s style. Imagine if these components were accessible out of the box, freeing you from last-minute concerns when developing new features under time pressure. But what’s the right level of abstraction to build accessibility into your UI components? The more generic the component is, the more flexibly it can be used in the app, making it difficult to provide excellent accessibility support by default. How should the API be build to ensure the best possible developer and user experience? Discover the answers and see a live demo of assistive technology in action. Elevate your development skills and create apps that are effortlessly inclusive from the ground up.

Transcript

1. by Feli Bernutz, Pragma Conference 2024 How to ensure accessibility in design system components Designing APIs
3. Has anyone followed the Olympics in Paris this year? !
4. Has anyone followed the Paralympics? !
6. Ever heard of the Vision Pad?
7. Source: Olympics – Accessibility Vision Pad
8. Accessibility is a human right.
9. My name is Feli Bernutz (she/her) • iOS engineer at @Spotify • Nuremberg, Germany " • Sketchnoting • Sports # $% • Pineapple on pizza & Heyy '
11. () It’s the process of architecting and structuring software to meet specific functional and technical requirements, like • scalability • security • performance System Design
12. *+ It’s a collection of • reusable UI components • style guidelines • design principles to ensure consistency across a product’s user interface. Design System
13. Source: Apple Design Website Apple’s design system
14. Source: Apple's Human Interface Guidelines
15. Apple’s system UI components are accessible by default.
16. So why not just use what Apple provides? ,
19. ✅ Sufficient Color Contrast Encore Color Theme
20. ✅ Don’t exclusively rely on color to convey meaning Multi modality
21. UI is just one option to let the user interact with your product.
22. User Information
23. Information User Shuffle mode enabled vs. Shuffle mode disabled
24. User Information Action
25. . Hearing / Taste 0 Smell 1 Vision ✋ Touch
26. . Hearing / Taste 0 Smell 1 Vision ✋ Touch
28. 1. 114: “Accessibility on Apple’s platforms”, with … 2. Swift by Sundell 3. Sommer Panage returns to the show to … 4. Mar 21, 2022, 1 hr, 12 min 5. Remove from Your Library 6. Download 7. Share 8. More options 9. Play 10. Paul Van Workum - App Accessibility Expert 11. The Digital Accessibility Podcast 12. In this episode, Joe James is joined by … 13. Apr 25, 2023, 34 min 14. Remove from Episodes 15. Download 16. Share 17. More options 18. Play
29. 1. 114: “Accessibility on Apple’s platforms”, with special guest Sommer Panage. Swift by Sundell, Published on 21. March 2022, Episode length is 1 hr, 12 min, Added to Your Library, Button, View episode details 2. Paul Van Workum - App Accessibility Expert. The Digital Accessibility Podcast, Published on 25. April 2023, Episode length is 34 min, Added to Your Library, Button, View episode details 3. Special: Daniel Devesa Derksen-Staats. AppForce1: news and info for iOS app developers, Published on 14. January 2021, Episode length is 41 min, Added to Your Library, Button, View episode details
30. Source: Laws of UX
31. Encore’s List Row component
32. How to design the API?
35. Progress over perfection. Guidelines to consider
36. There’s no such thing as perfect accessibility. Guidelines to consider
37. Provide different levels of abstraction. Guidelines to consider
38. Source: Jason Fried – The Obvious, the Easy, and the Possible (2011) & Jake Wharton – Slope-intercept library design (2022) Possible 4 % Easy 16 % Obvious 80 % Different levels of abstractions
39. ✨ DONE ✨ 1. Add out-of-the-box solution is it good enough? yes no The Game Plan
40. 4 // Default accessibility props are set internally var listRow = Encore.ListRow(content: .init( )) Out of the box solution The Game Plan – Step 1
41. 4 // Default accessibility props are set internally var listRow = Encore.ListRow(content: .init( media: .image(UIImage), )) Out of the box solution The Game Plan – Step 1
42. 4 Most Shared Podcast in Sweden // Default accessibility props are set internally var listRow = Encore.ListRow(content: .init( media: .image(UIImage), pretitle: .text("Most Shared Podcast in Sweden"), )) Out of the box solution The Game Plan – Step 1
43. 4 Most Shared Podcast in Sweden, Damn Fine Coffee // Default accessibility props are set internally var listRow = Encore.ListRow(content: .init( media: .image(UIImage), pretitle: .text("Most Shared Podcast in Sweden"), title: .text("Damn Fine Coffee"), )) Out of the box solution The Game Plan – Step 1
44. 4 Most Shared Podcast in Sweden, Damn Fine Coffee, Actions available // Default accessibility props are set internally var listRow = Encore.ListRow(content: .init( media: .image(UIImage), pretitle: .text("Most Shared Podcast in Sweden"), title: .text("Damn Fine Coffee"), trailing: .button(Encore.Button), )) Out of the box solution The Game Plan – Step 1
45. 4 Most Shared Podcast in Sweden, Damn Fine Coffee, Actions available // Default accessibility props are set internally var listRow = Encore.ListRow(content: .init( media: .image(UIImage), pretitle: .text("Most Shared Podcast in Sweden"), title: .text("Damn Fine Coffee"), trailing: .button(Encore.Button), )) Out of the box solution The Game Plan – Step 1
46. // Simplified internal logic func setup(content: Encore.Content) { accessibilityIdentifier = "Encore.ListRow" } Internal implementation The Game Plan – Step 1
47. // Simplified internal logic func setup(content: Encore.Content) { accessibilityIdentifier = "Encore.ListRow" isAccessibilityElement = true } Internal implementation The Game Plan – Step 1
48. // Simplified internal logic func setup(content: Encore.Content) { accessibilityIdentifier = "Encore.ListRow" isAccessibilityElement = true // Compute accessibility information by using the available content accessibilityLabel = content.accessibilityLabel } Internal implementation The Game Plan – Step 1
49. // Simplified internal logic func setup(content: Encore.Content) { accessibilityIdentifier = "Encore.ListRow" isAccessibilityElement = true // Compute accessibility information by using the available content accessibilityLabel = content.accessibilityLabel } Internal implementation The Game Plan – Step 1 extension Encore.Content { var accessibilityLabel: String { [ pretitle?.accessibilityLabel, title.accessibilityLabel, subtitle?.accessibilityLabel, media?.accessibilityLabel, leading?.accessibilityLabel, trailing?.accessibilityLabel, footer?.accessibilityLabel, ] .compactMap { $0 } .filter { !$0.isEmpty } .joined(separator: ", ") .replacingOccurrences(of: " • ", with: ", ") } }
50. // Simplified internal logic func setup(content: Encore.Content) { accessibilityIdentifier = "Encore.ListRow" isAccessibilityElement = true // Compute accessibility information by using the available content accessibilityLabel = content.accessibilityLabel accessibilityCustomActions = content.buttons.compactMap { $0.accessibilityCustomAction } } Internal implementation The Game Plan – Step 1
51. // Simplified internal logic func setup(content: Encore.Content) { accessibilityIdentifier = "Encore.ListRow" isAccessibilityElement = true // Compute accessibility information by using the available content accessibilityLabel = content.accessibilityLabel accessibilityCustomActions = content.buttons.compactMap { $0.accessibilityCustomAction } accessibilityCustomContent = content.accessibilityCustomContent } Internal implementation The Game Plan – Step 1
52. // Simplified internal logic func setup(content: Encore.Content) { accessibilityIdentifier = "Encore.ListRow" isAccessibilityElement = true // Compute accessibility information by using the available content accessibilityLabel = content.accessibilityLabel accessibilityCustomActions = content.buttons.compactMap { $0.accessibilityCustomAction } accessibilityCustomContent = content.accessibilityCustomContent accessibilityUserInputLabels = content.accessibilityUserInputLabels } Internal implementation The Game Plan – Step 1
53. // Simplified internal logic public var body: some View { makeBody(with: content) .accessibilityIdentifier("Encore.ListRow") .accessibilityElement(children: .combine) } SwiftUI internal implementation The Game Plan – Step 1
54. ✨ DONE ✨ 1. Add out-of-the-box solution is it good enough? yes no 2. Add explicit API for accessibility info is it good enough? no yes The Game Plan
55. Box.
56. Encore’s Box component The Game Plan – Step 2
57. var box = Encore.Box( ) Explicit API for accessibility info The Game Plan – Step 2
58. 4 var box = Encore.Box( contentView: ContentView(), ) Explicit API for accessibility info The Game Plan – Step 2
59. 4 Soft Pop Hits, Playlist, by Spotify var box = Encore.Box( contentView: ContentView(), accessibilityLabel: "Soft Pop Hits, Playlist, by Spotify", ) Explicit API for accessibility info The Game Plan – Step 2
60. 4 Soft Pop Hits, Playlist, by Spotify, Currently playing var box = Encore.Box( contentView: ContentView(), accessibilityLabel: "Soft Pop Hits, Playlist, by Spotify", accessibilityValue: "Currently playing", ) Explicit API for accessibility info The Game Plan – Step 2
61. 4 Soft Pop Hits, Playlist, by Spotify, Currently playing var box = Encore.Box( contentView: ContentView(), accessibilityLabel: "Soft Pop Hits, Playlist, by Spotify", accessibilityValue: "Currently playing", accessibilityHint: nil, ) Explicit API for accessibility info The Game Plan – Step 2
62. 4 Soft Pop Hits, Playlist, by Spotify, Currently playing, Button var box = Encore.Box( contentView: ContentView(), accessibilityLabel: "Soft Pop Hits, Playlist, by Spotify", accessibilityValue: "Currently playing", accessibilityHint: nil, accessibilityTraits: .button, ) Explicit API for accessibility info The Game Plan – Step 2
63. 4 Soft Pop Hits, Playlist, by Spotify, Currently playing, Button, Actions available var box = Encore.Box( contentView: ContentView(), accessibilityLabel: "Soft Pop Hits, Playlist, by Spotify", accessibilityValue: "Currently playing", accessibilityHint: nil, accessibilityTraits: .button, accessibilityCustomActions: [ playButton.accessibilityCustomAction, ] ) Explicit API for accessibility info The Game Plan – Step 2
64. 4 Soft Pop Hits, Playlist, by Spotify, Currently playing, Button, Actions available var box = Encore.Box( contentView: ContentView(), accessibilityLabel: "Soft Pop Hits, Playlist, by Spotify", accessibilityValue: "Currently playing", accessibilityHint: nil, accessibilityTraits: .button, accessibilityCustomActions: [ playButton.accessibilityCustomAction, ] ) Explicit API for accessibility info The Game Plan – Step 2
65. ✨ DONE ✨ 1. Add out-of-the-box solution is it good enough? yes no 2. Add explicit API for accessibility info is it good enough? no yes 3. Create Guidelines is it good enough? yes The Game Plan
66. Guidelines The Game Plan – Step 3
67. Live Demo with assistive technology
68. Summary
69. linktr.ee/felibe444