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