Accessibility for mobile app s Paula Rosa 

WHAT IS ACCESSIBILITY? 

MOBILE ACCESSIBILITY Accessibility is the ability to provide to all users the equivalent experience, considering each user’s disabilities 

MOBILE ACCESSIBILITY • From home to subway station (with or without help ) • Ask someone’s help from the subway station • From the subway station to the bank (with or without help ) • Wait in the lin e • Ask the attendant to transfer the mone y • From bank to the subway station (with or without help ) • Ask someone’s help in the statio n • From the subway to home (with or without help ) • From the subway to home (with or without help) • Open the ap p • Login the app (if needed ) • Go to transfe r • Fill the correct informatio n • Make the transfe r • Share receipt (if needed) Transfer money - App without accessibility Transfer money - App with accessibility 

MOBILE ACCESSIBILITY But more important, as developer you can bring to the accessibility users: • Freedo m • Independency • Increase capabilities 

ACCESSIBILITY FEATURES * All features are located in the user’s settings Color correction Talkback Switch access Brailleback Magnification Voice access 

TALKBACK 

TALKBACK • It’s the feature that requires more attention from the developer s • It navigate for each element emitting an audio: “state + text + component type ” • “Connect” + “Button ” • “On” + “shortcut Settings” + switch 

HOW THE TALKBACK WORKS • Each component is announced by the talkback (when it’s touched or focused ) • The user map the screen (memorising the component’s layout ) • After mapping it, he/she decides what action is going to take 2 actions : - Notice the wal l - Take another direction 

TALKBACK GESTURES Read the component 2x Click Swipe Focus change Back button Context menu Home screen Recent Apps Noti fi cations 

TALKBACK GESTURES Context Menu + Global Menu Customisable 

ACCESSIBILITY NEW FEATURES (ANDROID 12) Media player (Play / Pause ) controls gestures New Magnifier 

X LABELING COMPONENTS 

LABELLING DECORATIVE IMAGES android:importantForAcessibility="no" (API >= 16) 

LABELLING IMAGES THAT EXECUTE ACTIONS 

X GROUPING VIEWS 

GROUPING VIEWS 

X TEXT FIELDS 

ACCESSIBILITY FOR EDIT TEXTS 

X LIVE REGION 

ACCESSIBILITY IN EXECUTION TIME • Polite: Waits to talkback fi nish the audio that is executin g • Assertive: Interrupt the playing audi o • None: none of the other one s ViewCompat.setAccessibilityLiveRegion(view, ViewCompat.ACCESSIBILITY_LIVE_REGION_POLITE); 

X MULTI-STATE COMPONENTS 

ACCESSIBILITY FOR MULTI-STATE COMPONENTS view.sendAccessibilityEvent( AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED); Force focus event view.announceForAccessibility(“some announced text”); Announce accessibility text 

X CUSTOM VIEWS 

ACCESSIBILITY FOR CUSTOM VIEWS Views inherit from views with accessibility CustomView Views that do not inherit accessibility views - onDraw() - onMeasure() When the methods are overridden Inherit from the View class 

ACCESSIBILITY FOR CUSTOM VIEWS @Override public boolean dispatchPopulateAccessibilityEvent(AccessibilityEvent event) { event.getText().add(“some text”); return true; } Implement the methods: • onPopulateAccessibilityEvent( ) • dispatchPopulateAccessibilityEvent() - child view s • onInitializeAccessibilityEvent( ) • onInitializeAccessibilityNodeInfo (Service ) Events : • TYPE_VIEW_CLICKE D • TYPE_VIEW_LONG_CLICKE D • TYPE_VIEW_FOCUSE D • TYPE_VIEW_SCROLLE D • TYPE_VIEW_HOVER_ENTE R • TYPE_VIEW_HOVER_EXIT 

ACCESSIBILITY FOR CUSTOM VIEWS Virtual Views • Used when you want to provide views details in a single vie w • Use the Accessibility Service and AccessibilityNodeProvider to work with virtual views 

X TESTING ACCESSIBILITY 

ACCESSIBILITY SCANNER What can recognise : • Images description s • Duplicated description s • Text constras t • Cannot recognise everythin g • Android 6.0 + 

TESTING ACCESSIBILITY BY WRITING TESTS onView(withId(R.id.ic_app_notificacao)).check (matches(not(hasContentDescription()))); Test if the component has (or not) the content description onView(withId(R.id.botao_twitter)).check (matches(withContentDescription(“Login with twitter account”))); Check the component description 

TESTING ACCESSIBILITY USING LINT 

X ACCESSIBILITY TIPS 

ACCESSIBILITY TIPS • Be careful with banners (because they can steal the focus ) • Be careful with components transparency • Explore vibration (that is under explored in mobile apps) • Pay more attention to the multi-state component s • It’s a good practice to integrate voice commands to the app s 

ACCESSIBILITY FOR TUTORIALS It’s better to use solid screens tutorials instead of the transparency ones . Because the transparency allows the accessibility to focus in the components bellow the desired objects. Incorrect Correct 

ACCESSIBILITY IN UX / DESIGNER SPECS 

USEFUL LINKS • https://developer.android.com/guide/topics/ui/accessibility/index.htm l • https://codelabs.developers.google.com/codelabs/basic-android-accessibility / • http://www.slideshare.net/KellyShuster/android-accessibility-droidcon-londo n • http://www.slideshare.net/7mary4/android-accessibility-3999545 6 • https://www.youtube.com/watch?v=euEsfNR5Zw4 (io 2015 ) • https://www.youtube.com/watch?v=Ce7q_cu8mvo (io 2021 ) • https://www.youtube.com/watch?v=apEz73_H2fU (Voice Access) 

THANK YOU