Making Your App(s) Inclusive
Dimitri James Tsiflitzis
CocoaHeads SKG #39 - Stars and shadows ain’t good to see by
iOS Accessibility
Everyone uses smartphone apps, including people with disabilities. Building accessible apps helps them use them.
So let's:
- Create apps that leverage the power and simplicity of Apple's assistive technologies.
- Adapt your app to make it accessible to everyone, regardless of their physical or learning abilities.
- Structure your app interface for accessibility.
Disability inclusion
- One billion people, or 15% of the world’s population, experience some form of disability.
- Barriers to full social and economic inclusion of persons with disabilities include the unavailability of assistive devices, technologies and apps.
- Global awareness of disability-inclusive development is increasing.
Some stats curtesy of the World Bank:
App Accesibility myths
- Seems like a lot of work for a small portion of your user base.
- "There is no way I'll be able to convince my partners/bosses".
- It's too hard.
- Your app is probably kind of accessible.
Unfortunately for everyone, accessibility, is always at the bottom, or not even in, the priority list. Why is that?
How Accessible is Your App?
Access voice over on demand with a power button triple-tap.
How Accessible is Your App?
How Accessible is Your App?
Use Xcode's built-in Accessibility Inspector.
Xcode > Open Developer Tool > Accessibility Inspector.
Image: https://www.scaledrone.com/blog/ios-accessibility-tutorial-tips-on-making-your-app-more-accessible/
How to make your iOS app more accessible (the easy stuff)
- Make sure all elements have accessibility labels via the accessibilityLabel property.
- 💡You don’t need to add "Button" etc. because iOS will automatically add that for you.
- 💡If you don’t provide an accessibility label for images, VoiceOver will use whatever name you gave your image filenames; so don't be too creative there.
How to make your iOS app more accessible (the easy stuff)
- You can set the accessibilityHint property to be read right after the label the first time it is focused upon.
- 💡Ending with a full stop or period helps VoiceOver read the hint more naturally.
- 💡If you localize your app, make sure you localize your accessibility labels and hints.
How to make your iOS app more accessible (the easy stuff)
- The accessibilityTraits property lets you describe what functionality your components do – if they are they buttons, links, or images, and so on.
cell.accessibilityTraits |= UIAccessibilityTraitButton
cell.isAccessibilityElement = false
cell.contentView.subviews.forEach { $0.isAccessibilityElement = true }tl;dr Ensuring every UI element has a label, hint and trait is a pretty good start.
Interlude: Dynamic Type to resize your app's text
Users can set a system-wide preferred font size for all apps.
// headline
textView.font = UIFont.preferredFont(forTextStyle: UIFont.TextStyle.headline)
// subheadline
textView.font = UIFont.preferredFont(forTextStyle: UIFont.TextStyle.subheadline)
// body
textView.font = UIFont.preferredFont(forTextStyle: UIFont.TextStyle.body)
// footnote
textView.font = UIFont.preferredFont(forTextStyle: UIFont.TextStyle.footnote)
// caption 1
textView.font = UIFont.preferredFont(forTextStyle: UIFont.TextStyle.caption1)
// caption 2
textView.font = UIFont.preferredFont(forTextStyle: UIFont.TextStyle.caption2)💡Use NotificationCenter to subscribe to the UIContentSizeCategoryDidChange to refresh your user interface if you receive it.
Things to keep in mind
- UIKit is accessible out of the box. So, UILabel, UIButton, UISlider etc. are all highly accessible for free.
- On UIView subclasses or "custom views" he said passive aggresively, ensure you set isAccessibilityElement to true so its accessible, and set accessibilityValue property to something that VoiceOver can read.
- VoiceOver reads exactly what's it on the screen; so if your app says 37km, make sure VoiceOver says "thirty seven kilometers".
Pro tips
- For extra ❤️, you can customize your UIs user for VoiceOver. Check whether VoiceOver is running by calling UIAccessibilityIsVoiceOverRunning(), and adapt your UI accordingly. E.g. you can limit animations, elements that dissapear after a second or to can stay for longer or show additional UI.
- If you opt to make your app accesible, integrate accesibility into your worflow. So if you UI changes, update the accessibility values and functionality. The same applies for new features and UI.
SwiftUI Accessibility
- Set an accessibility label on your SwiftUI element using the modifier .accessibility(label: Text("Done"))
Button(action: {},
label: { Text("➡️✉️") })
.accessibility(label: Text("Send"))SwiftUI Accessibility
Slider(value: $sliderValue, in: minimumValue…maximumvalue)
.accessibility(value: Text(""\(Int(sliderValue)) out of 10"))- This should be the text representation of the value or content of a control.
SwiftUI Accessibility
Button(action: {}, label: { Text(“➡️✉️”) })
.accessibility(hint: Text(“Sends your message.”))- Accessibility hint
Resources
- WWDC Accesibility videos https://developer.apple.com/videos/frameworks/accessibility
- Accessibility on iOS https://developer.apple.com/accessibility/ios/
- Ray Wenderlich iOS Accessibility: Getting Started https://www.raywenderlich.com/6827616-ios-accessibility-getting-started
- DEVit 2017 :: Technologic (Human Afterall): Accessibility mix https://www.youtube.com/watch?v=oeDzH3nskbg
Ευχαριστουμε 🎈
Dimitri James Tsiflitzis
Making Your App Inclusive
By tsif
