ios accessibility
TRANSCRIPT
iOS AccessibilityLow Effort, High Reward
Luis Abreu UX Designer
AgendaAccessibility
iOS
Guidelines & Examples
AgendaAccessibility
iOS
Guidelines & Examples
Accessibility is UX turned up to 11.
Impairments
Severity Nature Duration
Mild External Temporary
Severe Internal Chronic
Blindness, DeafnessImpairments
Severity Nature Duration
Mild External Temporary
• Severe • Internal • Chronic
Dyspraxia, RSIImpairments
Severity Nature Duration
• Mild External • Temporary
Severe • Internal Chronic
Sunlight, Noise, MultitaskingImpairments
Severity Nature Duration
Mild • External • Temporary
• Severe Internal Chronic
Accessibility is inclusion, and robustness.
…one last thing about Accessibility
–2011 WHO World Report on Disability
“15 percent (1 Billion) of the world’s population (7 Billion) live with some
kind of impairment”
–UN Factsheet on Persons with Disabilities
“75% of the FTSE 100 companies in the UK do not meet basic levels of
accessibility, thus missing out on more than £96 ($147) million in revenue.”
🤔
If Accessibility is so important, how come I mostly hear about it at events
like this?
Survivorship Bias
Survivorship Bias
Overlooking those that did not survive because of their lack of visibility.
“Engagement” Bias
Overlooking those that did not survive use your app because of their lack of
visibility.
Accessible apps are rare, this is an opportunity.
Accessibility Takeaways• Accessible apps are Inclusive and Robust
• Impairments vary in Severity, Nature, and Duration
• No Complaints != No Problem or Opportunity
AgendaAccessibility
iOS
Guidelines & Examples
Assistive TechnologiesAny feature or hardware that informs or helps users interact with your app in a way that’s most accessible to them.
LED Flash Alerts
Button Shapes
Audio Descriptions
Hold Duration
Reachability
Ignore Repeat
Dictionary
Darken Colors
Closed Captions
SDH
Reduce White Point
3D Touch Sensitivity
Home Button SpeedGrayscale
Audio Balance
Hearing Aid Mode
Inverted Colors
Button ShapesLarger Text
Reduced Motion
Tap Assistance
Mono Audio
Reduced Transparency
Bold Text
Switch Labels
Speak Selection
Zoom
Switch Control
VoiceOver
Assistive Touch
A. Hardware
Speak Screen
Impairments - TechnologiesMild Severe
Visual Larger Text Astigmatism
VoiceOver Blindness
Hearing Mono Audio Partial Deafness
Captions Deafness
Motor Assistive Touch RSI
Switch Control Tetraplegia
Learning Speak Screen Dyslexia
Guided Access Autism
Larger Text
Default LargestSmallest
Reduce Transparency
Assistive Touch
VoiceOverPerception and Interaction
lmjabreu.wistia.com/medias/o2k8ln3iy8
VoiceOverPerceive and Interact without seeing the screen or direct manipulation
• Move through UI elements sequentially and announce them via Speech or Braille
• Perform actions using a single button: whole screen/external
Very popular for Vision impairments
Doesn’t support 3D games, drawing apps
Free (saving thousands), Built-in, High-Quality
Switch ControlInteraction through any means possible
lmjabreu.wistia.com/medias/7iynpnjild
Switch ControlInteract without touching the screen
• Move through UI elements sequentially, automatically or manually
• Point at elements using a gliding cursor (slower, any app)
• Select elements and actions via external switches
• Activated with head, chin, mouth, eyes, wrist, finger, etc
Very popular for Motor impairments
Also free, Built-in, High-Quality
Assistive HardwareHundreds of supported Input/Output Devices
• i.e. Braille Displays, Hearing Aids, Sip-and-Puff
Zero Design or Development effort
Braille Display
$2839 / £1885
Switches
Simple $59 / £39
Chin $199 / £132
Sip-and-Puff $389 / £258
Sensitive $79 / £52
Motion $699 / £464
AgendaAccessibility
iOS
Guidelines & Examples
How do I Accessibility 🤔now that we’ve seen benefits and iOS technologies
Guidelines
1. Perceivable
2. Operable
3. Understandable
4. Robust
For Designers and Developers
⚠ Always RememberDon’t assume perfect Vision, Hearing, Physical and Motor, Learning and Literacy abilities
Abilities can be limited by external conditions such as Sunlight, Noise, Multitasking
Do I know it’s there?Perceivable
Color BlindnessUse shape, color, and animation, as well as audio cues. Brings your app to life, provides resistance to color impairments.
Color-richRed star is easy to spot.
Color… may fail.Where’s the star again?
Color and shape.Outlined vs. Filled, Red vs. Green.
…or just shape.Outlined vs. Filled
Shape, it works even without color.Color speeds up recognition, but clear shapes, and ultimately, text remove ambiguity.
Low VisionGood contrast makes reading text, distinguishing elements or state easier, or even possible.
External blindnessSunlight changes how your app (Spotify) is perceived.
External blindnessGo high contrast, test the usage context and device.
Blindness, Deafness.Text is elementary, unambiguous, easily converted to audio or braille.
Name the icon.
Name the icon.
Text is unambiguous, clear.And it can look good.
Unambiguous options
Clear consequence
Can I use it?Operable
Assisted InteractionDo use custom UI components and gestures to speed interactions but consider severely impaired users.
TimingDon’t automatically perform or constrain actions to a time limit.
Does it make sense?Understandable
LanguageUse simple, familiar language for both text and metaphors. Localize your app.
Gmail doesn’t speak my language.What’s that icon on the top right? Why are add contact and attach disabled like the back button?
# Gmail $ Mail
Citymapper is localizedI can see the price in a familiar, local currency, and bus stop identifier letters help me avoid mistakes.
Error IdentificationCommunicate through text, clearly.
Is it future-proof?Robust
NativeLeverage ready-to-use, familiar components
Map View
Label
Header
Slider
Page View
Switch Text View
Text Field
Table View
Collection View
Tab Bar
Segmented Control
Activity Indicator
Page Control Stepper
Alert
Date Picker
Picker View
Image Picker
Document PickerNavigation Bar
ToolBar
Search Bar Contact Picker
Button
Generic Picker
Media Picker
Image View
Printer Picker
Nothing is freeTalking about an idea isn't free
Deciding wether to implement isn't free
QA won't be free
Informing users won't be free
Testing won't be free
Updating support isn't free
Maintaining it isn't free
Undoing it won't be free
adapted from Intercom’s Product Management book
iOS is designed to save you work. Invent, don’t reinvent.
…so cheesy ¯\_( )_/¯
Accessibility SemanticsDescribe your app to iOS
Accessibility Semantics answer:Purpose Am I relevant for Accessibility?
Name How do I identify myself?
Personality What are my characteristics?
Value Do I change with user interaction or time?
Interaction How exactly do I work?
Location Where am I?
Purpose
var isAccessibilityElement: Bool
Basic Accessibility API
not recommended
[Image]; [Do Not Disturb; Button].
Do Not Disturb
Don’t“Image” is unhelpful, redundant
recommended
Do Not Disturb; Button.
Do Not DisturbDo Not Disturb
DoHide unhelpful, redundant elements.
Name
var accessibilityLabel: String?
Basic Accessibility API
not recommended
Button.
M.I.A.Bad Girls
Don’t“Button” clarifies neither identity or consequence
recommended
Play, Bad Girls by M.I.A.; Button.
M.I.A.Bad Girls
DoIdentity and consequence are clear
Personality
var accessibilityTraits: UIAccessibilityTraits
Basic Accessibility API
Detail
not recommended
Detail.
Don’t“Detail” provides identity but not personality
Detail
recommended
Detail; Button.
Do“Button” declares interactive personality
Value
var accessibilityValue: String?
Basic Accessibility API
not recommended
9:00 … 9:00 … 9:00 … 9:00
12
6 5432
11110987
12
6 5432
11110987
12
6 5432
11110987
12
6 5432
11110987
Don’tState changes aren’t perceptible
12
6 5432
11110987
12
6 5432
11110987
12
6 5432
11110987
12
6 5432
11110987
recommended
9:00 … 9:08 … 9:30 … 9:41
DoValue changes with time
Interaction
var accessibilityHint: String?
Basic Accessibility API
not recommended
Reorder Lisbon; Button, Draggable.
Lisbon
San Francisco
Don’tNo helpful interaction hint
recommended
Reorder Lisbon; Button, Draggable; Double tap and hold, wait for the sound, then drag to rearrange.
Lisbon
San Francisco
DoProvides a helpful interaction hint
Location
var accessibilityFrame: CGRect
Basic Accessibility API
not recommended
Incorrect size and position.
Lisbon
San Francisco
Don’tConfusing, which element am I focused on again?
recommended
Large, well-positioned, easy to see.
Lisbon
San Francisco
DoClearly indicate highlighted element.
Advanced Accessibility APIfunc accessibilityIncrement / Decrement() (with .Adjustable Trait)
func accessibilityActivate() -> Bool
func accessibilityScroll(_ direction: UIAccessibilityScrollDirection) -> Bool
func accessibilityPerformEscape() -> Bool
func accessibilityPerformMagicTap() -> Bool
var accessibilityActivationPoint: CGPoint
var accessibilityElementsHidden: Bool
var accessibilityLanguage: String?
var accessibilityPath: UIBezierPath?
var accessibilityViewIsModal: Bool
var shouldGroupAccessibilityChildren: Bool
var accessibilityNavigationStyle: UIAccessibilityNavigationStyle
var accessibilityCustomActions: [UIAccessibilityCustomAction]?
enum UIAccessibilityZoomType: Int
struct UIAccessibilityNotifications for Accommodations, Announcement status and Highlight Control
struct UIAccessibilitySpeechAttributePunctuation(NSNumber)/Language(NSString)/Pitch(NSNumber) for attr. strings
SummaryAccessibility
iOS
Guidelines & Examples
Accessibility• Shares principles with UX, not a separate
effort.
• More than just severe impairments, sunlight can blind you.
• Few accessible apps, make a difference, or business.
iOS Low Effort, High Reward
Low EffortAccessibility is built-in and robust
• Accessible UI Elements for display, interaction, navigation
• Simple APIs for Custom Accessible UI Components
• Free Assistive Technologies
• Free Assistive Hardware support
High RewardEasier Testing, Multi-Language/Device/Orientation/Tasking
• Shared benefits from using Dynamic Text, Auto-Layout, Built-in Components
Wider, happier userbase
• App works regardless of disability, or situation
Radically improve people’s lives by giving them independence
• Communication
• Entertainment
• Business
Guidelines & ExamplesDesign
• Perceivable, Operable, Understandable, and Robust
Development
• Relevance, Name, Personality, Value, Interaction, and Location
Twitter@lmjabreuiOS Accessibility Handbook leanpub.com/iosaccessibilityApple Accessibility Documentationdeveloper.apple.com/accessibility/ios
Thank you