Accessibility: Building an Inclusive Android Application

Transcript

1. Accessibility: Building an Inclusive Mobile Application Aung Kyaw Paing Senior Consultant @ thoughtworks | GDE Android aungkyawpaing.dev
2. 2 Pic Ref: UK Gov Pic Ref: pxfuel
3. “Because I'm hearing-impaired, emails are a tremendously valuable tool because of the precision that you get, I can read what's typed as opposed to straining to hear what's being said.” - Vint Cerf, one of “the fathers of the Internet”
4. But sadly for many of us, accessibility is an afterthought. “It's a crime that the most versatile device on the planet, the computer, has not adapted well to people who need help, who need assistive technology” Vint Cerf, one of “the fathers of the Internet”
5. “The majority of blind people, for instance, are employed to work with a computer, but inaccessible sites contribute to them losing, on average, 30.4% of time. And that time costs so much: promotions and pay rises, company productivity, the public perception that PWDs are not valuable company assets and should not be hired.” Ref: The Digital Divide No One Has Talked About: PWDs And The Internet https://www.ricemedia.co/current-affairs-features-digital-divide-singapor e-pwds-internet-web-accessibility/
6. Hearing Vision Speech Motor Cognition Common Disabilites
7. Everyone can experience one of these at one point in their life
9. Accessibility features benefits everyone!
10. Accessibility can also benefit you as a business
11. You’re losing potential revenue! If your software is inaccessible or unusable, the customer can simply choose to “click away”. In UK, retailers lose out on £17 billion in 2019 by failing to meet the online needs of shoppers with disabilities. Ref:The Click-Away Pound Survey
12. Some country has laws! - Americans with Disabilities Act of 1990 - Australia’s Disability Discrimination Act of 1992 - United Kingdom’s Equality Act of 2010 - European accessibility act, 2012 - Singapore’s Enabling Master Plan 2030 (EMP 2030)
13. Or it could just be for Features like adaptive design, closed captions helps everyone Better user experience Inclusive brand image Global spending power of disabled households has risen to $13 trillion per year (Ref: 2020 Global Economics of Disability Report)
14. Naughty Dog discovered a lot of sighted players were using the feature, auto pickup, because they didn’t want to spend so much time treasure hunting. - Imaginary Worlds, episode 181, “Playing Blind”
15. Which of the following do you think is the primary reason that many developers do not create accessible web sites? Ref: WebAIM screen reader user survey https://webaim.org/projects/screenreadersurvey8
16. Assistive Technologies 16 Braille Display Screen reader Switches Face Control (Project Gameface)
17. You don’t have to reinvent the wheels. Android already has accessibility services that interacts with these assistive technologies.
18. 18 Talkback - Screen reader services - Describe content out aloud - Users interact with gestures (single tap, double tap etc)
19. 19 BrailleBack - Integration with braille display - Used together with Talkback - User interact using keys on display
20. 20 Switch Access - Switches instead of taps - Scan items and highlight - User can interact with switches
21. 21 Voice Access - Control hand-free - Show labels and grids - User interact device with voice commands
22. Write one time, works everywhere
23. What can you do?
24. Colors Do not use colors as the only/primary means of communication
25. Touchable area must have 48dp size In addition to making it easier to tap on a component, switch access can scan a point on the screen to interact with it. Smaller touch size will have problem with this feature.
26. Touchable area must have 48dp size Making touch are bigger doesn’t means you have to break your UI. You can use padding to expand the touchable area without making the component looks bigger.
27. Describe your image Provide a screen readable description of your image and actions. Make sure it’s also translated for all the languages you supports.
28. Describe your image However, if an image is just for visual or stylistic purpose. Tell the system to skip these elements.
29. Describe your image If it’s user-generated content, you can provide a way for users to add/edit alternate text of the images. You can also use large language model like Gemini to generate the description and prefill by default.
30. Describe clicks Describe what would happen if a user perform a click interaction on the component as this prevent misclicks. “Double Tap to open Privacy Policy Page”
31. Describe clicks Row( modifier = Modifier .clickable(onClickLabel = "View Contact") { openContactPage() } ) { // Render Contents }
32. Describe state changes Alert the user for state changes on interaction. States can be YES/NO, ON/OFF boolean values or there can also be more than two in component like sliders. Image ref: https://medium.com/google-develo per-experts/state-descriptions-on- android-b2029283871f
33. Describe state change (for Boolean States ) MicrophoneControl( modifier = Modifier.toggleable(isMicrophoneOn) { isMicrophoneOn = !isMicrophoneOn } )
34. Describe state change (for multiple states) VolumeSlider(modifier = Modifier.semantics { stateDescription = "$volume" })
35. Replace complex gesture (e.g swipe) with accessibility actions Accessibility services like talkback uses swipe to focus next/previous component. This can override your swipe gestures. Therefore, we need to replace them with click actions or add custom accessibility actions.
36. If you only have one complex gesture Row( modifier = Modifier // only apply click in semantics tree (i.e for a11y services) .semantics { onClick(label = "Delete") { deleteMail() return@onClick true } } ) { // Render Contents }
37. If you only have multiple complex gesture or it already has click action Row( modifier = Modifier.semantics { customActions = listOf( CustomAccessibilityAction("Action 1") { true }, CustomAccessibilityAction("Action 2") { true } ) } ) { // Render Contents }
38. Merge components Merge semantically relevant components together to make screen readers easier to navigate with fewer taps. You must always merge items in your list + “Checkbox Checked” “With Soup” “Checkbox With Soup - Checked”
39. Merge components 6 taps to navigate through each item! 10 items would make it 60 taps!
40. Merge Components Row( modifier = Modifier .semantics(mergeDescendants = true) {} ) { // Render Contents }
41. Move child actions up to merged parents If the child component has actions available, the accessibility service will still focus on them for interaction. So, we have to remove these actions from child items and move them to merged parent or replace them with custom accessibility actions.
42. When only one child has click action Row( modifier = Modifier.semantics(mergeDescendants = true) { onClick(label = "Bookmark") { true } } ) { ... // clearAndSetSemantics remove accessibility click action from Button Button(modifier = Modifier.clearAndSetSemantics{}) }
43. When multiple child or parent also has click actions Row( modifier = Modifier.semantics { customActions = listOf( CustomAccessibilityAction("Action 1") { true }, CustomAccessibilityAction("Action 2") { true } ) } ) { .. Button1(modifier = Modifier.clearAndSetSemantics{}) Button2(modifier = Modifier.clearAndSetSemantics{}) }
44. Quick Recap - Colors - Button Sizing - Describing Image - Describe actions (click, toggles, sliders) - Replace complex gestures with accessibility actions - Merge components
45. When in doubt: Use system components Use system provided components from the operating system instead of creating your own. However, if you have to make your own, do make it accessible as well.
46. Official guides - https://developer.android.com/guide/topics/ui/accessibility - https://developer.android.com/develop/ui/compose/accessibility - https://developer.android.com/codelabs/starting-android-accessibility https://pastebin.com/GXtd9cPL
47. Testing Accessibility
48. Enable automatic checks in tests Espresso provides a one-line code to enable accessibility checks while performing your UI tests. Compose support is currently in developer preview class EspressoTest { init { AccessibilityChecks.enable() } }
49. Enable automatic checks in tests There were 2 accessibility errors: AppCompatImageButton{id=2131165210, ...}: View is missing speakable text needed for a screen reader, AppCompatImageButton{id=2131165210,...}: View falls below the minimum recommended size ... ...
50. Toolings You can use some of these tools to help you in testing accessibility for your software. • Lighthouse (https://chromewebstore.google.com/detail/lighthouse/) • axe DevTools (https://www.deque.com/axe/devtools/) • Android Accessibility Scanner (https://play.google.com/store/apps/details?id=com.google.android.apps.accessibi lity.auditor) • Compose UI Check mode in Android Studio (https://developer.android.com/studio/preview/features/#compose-ui-check)
51. https://www.magentaa11y.com/
52. Test the experience Remember that accessibility is an user experience. And like all UXs, you cannot and should not automate everything. Thus, prefer to - Include people with disabilities in your testing groups - Or test yourself! When you go back home today, put a blindfold on, enable Talkback on your phone, and then open your app and see if you can still use it easily
53. Accessibility is collaborative effort The team needs to shift-left the accessibility features. Instead of making it as an afterthought, include accessibility requirements in your feature inception. Everyone (developers, UX engineers, product owners and so on) needs to play their part in making the digital world more inclusive.
54. Responsible Tech Responsible tech is a way of working that aligns technology and business behavior with society’s and individual’s interests. It explores and actively considers the values, unintended consequences and negative impacts of tech, and actively manages, mitigates and reduces risk and harm. Get Thoughtworks Responsible Tech Playbook for free: https://www.thoughtworks.com/en-th/about-us/social-c hange/responsible-tech-playbook
55. Accessibility: Building an Inclusive Mobile Application Aung Kyaw Paing Senior Consultant @ thoughtworks | GDE Android aungkyawpaing.dev