mobile accessibility - how to become socially responsible mobile developer

24
Mobile accessibility How to become socially responsible mobile developer? Konstantin Loginov

Upload: konstantin-loginov

Post on 13-Jan-2017

264 views

Category:

Engineering


6 download

TRANSCRIPT

Page 1: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

Mobile accessibilityHow to become socially responsible mobile developer?

Konstantin Loginov

Page 2: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

About me

7,5 years in Mobile development: Windows Mobile webOS Windows Phone 7/8 iOS (native/Xamarin) Android

Current Position: Android Tech Lead at Microsoft

[email protected] / https://no.linkedin.com/in/klogi

Page 3: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

Why do I care about accessibility?

• Social responsibility – it’s just right• Reaching out new users

3B of the Internet users in 2015 1.91B of smartphones users in 2015

• 2.56B in 2018 More than 1B of Android users 1B(every 7th!) have some form of disability

• 285M of visually impaired people• 1 of 20 Americans are deaf or hard of hearing

Getting better app’s ratings Extra chance to be featured by Apple

• Legal obligations

When we work on making our devices accessible by the blind, I

don't consider the bloody ROI

Tim Cook

Page 4: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

What makes app accessible?

Every user interface element with which users can interact is accessible. This includes elements that merely supply information, such as static text, as well as controls that perform actions.

All accessible elements supply accurate and helpful information.

Page 5: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

Mobile accessibility – what does it involve? VoiceOver/Talkback – spoken feedback to help blind and low-vision users Switch Control/Switch Access – navigate through onscreen items and

perform actions using a Bluetooth-enabled switch hardware for people with impaired physical and motor skills

Large text, color inversion Zoom / Magnification gestures – to zoom in screen’s content Siri / Google Now

Page 6: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

iOS vs. Android

Page 7: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

Wall of Shame

Page 8: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

Wall of Fame

Page 10: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

Mobile Accessibility Practices

If you are following the rules – application is already accessible!

Page 11: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

Android practices Do not use small text sizes

Do not use “dp” as a textSize, only “sp” Use contrast colors for text and background Carefully use third-party libraries for UI work Give a meaningful contentDescriptions for ImageViews, Buttons, CheckBox,

etc.

Page 12: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

Android practices Don’t forget “state_focused” in selector

If element is not essential for TalkBack mark it as not important for accessibility (API level 16+):

Review & modified, if needed, focus order or disable focusability with

layout attributes: nextFocusDown,.., nextFocusUp, focusable Go through the checklist before every release: http://

developer.android.com/guide/topics/ui/accessibility/checklist.html

Page 13: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

Android practices How to check if Talkback is turned on (API level 14+):

public static boolean isScreenReaderActive(Context context) { AccessibilityManager accessibilityManager = ( AccessibilityManager) context.getSystemService(Context. ACCESSIBILITY_SERVICE); return accessibilityManager.isTouchExplorationEnabled();}

How to check if View in Talkback’s focus (API level 21+):

View.isAccessibilityFocused();

Read more about accessibility for Android: http://developer.android.com/guide/topics/ui/accessibility/index.html

Page 14: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

iOS practices Use Apple’s build-in apps as an example Give a meaningful Titles/Labels, Hints for UIImageViews, UIButtons, UISwitches,

etc. Review Traits and use the right ones

It can be done in Interface Builder or in the code-behind Have hints for page titles in UITabBarController

• Label: Favorites• Hint: Shows documents you've added to your favorites.

Page 15: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

iOS practices

Make custom individual Views accessible

Use Accessibility Inspector on iOS Simulator during developmentRead more: https://developer.apple.com/library/ios/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityiniOSSimulatorwithAccessibilityInspector/TestAccessibilityiniOSSimulatorwithAccessibilityInspector.html#//apple_ref/doc/uid/TP40012619-CH4-SW1

Page 17: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

iOS practices

Use UIAccessibilityCustomAction (iOS 8+)

Page 18: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

Common for both platforms practices

Make all people productive Don’t reinvent the wheel – stick to platform-specific navigation model No audio-only feedback VoiceOver/TalkBack texts have to be also localized Test the app

Page 19: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

How can I test my Android app?

Enable accessibility on your device:

Page 20: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

How can I test my Android app?

Test: Directional controls – app must be operable without touchscreen Test: TalkBack audio promts – UI controls have clear and accurate audio

descriptions Test: Touchable control size – all actionable controls bigger, than 48x48

dp Test: In-app gestures work with Talkback enabled Test: no audio-only feedback

Page 21: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

How can I test my iOS app?

Again, use Accessibility Inspector Enable accessibility on your device:

Page 22: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

How can I test my iOS app?

Test: Directional controls – app must be operable without touchscreen Test: VoiceOver audio promts – UI controls have clear and accurate audio

descriptions To avoid cheating – enable Screen Curtain, so you can rely only VoiceOver

speaks Test: Touchable control size – all actionable controls bigger, than 44x44

px Test: no audio-only feedback

Page 23: Mobile Accessibility - How To Become Socially Responsible Mobile Developer

Instead of conclusion

Accessibility is not an investment – it’s just adopting right coding-practices

Accessibility does not impact your ability to innovate and create beautiful apps

It’s easy! Xamarin claims to have full support of accessibility features.