A11Y Camp - Lessons learnt from building accessible native mobile apps

Lessons Learnt From Building Accessible Native Mobile Apps

Ashton Williams OdeceeA11Y Camp

VoiceOver

• Screen reader

• Built into every iPhone, iPad, Mac, and Apple Watch

Dynamic Type

• Device wide setting for text size

UIAccessibilityiOS accessibility framework

UIAccessibility

UIAccessibility• Textual labels, descriptions, values, hints, ...


• Navigation hierarchy seperate from graphical display



• VoiceOver



• VoiceOver

• Braille displays



• VoiceOver


• Switch Control



• VoiceOver


• Switch Control

• Teletype (TTY) machines

Dynamic Type Examples

Notes appDefault Extra Extra Extra Large Accessibility Extra Extra

Extra Large

Settings appDefault Extra Extra Extra Large Accessibility Extra Extra

Extra Large

Twitter appDefault Accessibility Extra Extra Extra Large

Methodology

Methodology• Include accessibility in planning


• Accessibility is User Experience (UX)



• VoiceOver is a User Interface




• Build the app accessible from the start





• Doing it last will be surprisingly difficult





• Doing it last will be surprisingly difficult

• Test on device

Pragmatism

Pragmatism

• Standard looking apps are easier

Pragmatism


• Custom UI means work to create custom graphics and custom accessibility

Pragmatism


• Custom UI means work to create custom graphics and custom accessibility

• Build for flexibility

Dynamic Type

Dynamic Type

• Does not support Custom Fonts

Dynamic Type

• Does not support Custom Fonts

• Can be significant work to support

Tips

• Use VoiceOver

Tips

• Use VoiceOver

• Enable two or more accessibility shortcut items

iOS 10

Magnifier

• Triple tap Home button to start Magnifier

• Various colour filters to help someone increase the contrast.

Magnifier app screenshot

Custom Search Rotors

To use the rotor you take two fingers and twist onscreen as though you're

manipulating a physical dial.

Custom Search Rotors• Default rotors include;

Containers, Headings, Links To use the rotor you take two fingers and twist onscreen as though you're



Containers, Headings, Links

• Apps can now define their own rotors




Containers, Headings, Links

• Apps can now define their own rotors

• Visually distinctive screen elements can be quickly navigated in isolation



To use the rotor you take two fingers and twist onscreen as though you're manipulating a physical dial. Do that to select the rotor setting to use, and then swipe up or down with one finger to search previous or next with that rotor.

ExampleA research app could use a rotor to jump to highlighted portions of text.

Illustration of text with highlighted portions.

Xcode 8

Accessibility Inspector

Accessibility Inspector

• Quickly inspect accessibility

• Does not replace testing with VoiceOver

• Automatic Audit is helpful, but has false positives. Does not replace manual testing.

More Resources

• Apple Accessibility for Developers https://developer.apple.com/accessibility/

• Android Accessibility Guidehttps://developer.android.com/guide/topics/ui/accessibility/index.html

https://developer.apple.com/accessibility/

https://developer.android.com/guide/topics/ui/accessibility/index.html

More Resources

• What's New in Accessibilityhttps://developer.apple.com/videos/play/wwdc2016/202/

• Inclusive App Design https://developer.apple.com/videos/play/wwdc2016/801/

• Auditing Your Apps for Accessibilityhttps://developer.apple.com/videos/play/wwdc2016/407/

https://developer.apple.com/videos/play/wwdc2016/202/



Disability and Innovation: The Universal Benefits of Accessible Design

First deaf blind person to graduate from Harvard Law School.

Accessibility and inclusion advocate.


Haben Girma


President Obama and Haben Girma communicating via keyboard and a digital braille display.

–Haben Girma

“Now imagine a lot of people thinking, why would a camera app need to be accessible? Why would

blind people ever take pictures? We take pictures for the same reasons sighted people take pictures. To

capture moments, to share experiences with friends. Our goal is to make sure all apps are accessible.”

–Haben Girma

“Try not to make assumptions about what people with disabilities can and can't do. Instead, strive for

inclusion.”

Thank You. Questions?

@AshtonDev

GitHub.com/Ashton-W

Ashton-W.net

Senior iOS Developer at Odecee

http://Ashton-W.net

A11Y Camp - Lessons learnt from building accessible native mobile apps

Software

Transcript of A11Y Camp - Lessons learnt from building accessible native mobile apps