Accessibility: Building an Inclusive Android Application

Slide 1

Slide 1 text

Accessibility: Building an Inclusive Mobile Application Aung Kyaw Paing Senior Consultant @ thoughtworks | GDE Android aungkyawpaing.dev

Slide 2

Slide 2 text

2 Pic Ref: UK Gov Pic Ref: pxfuel

Slide 3

Slide 3 text

“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”

Slide 4

Slide 4 text

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”

Slide 5

Slide 5 text

“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/

Slide 6

Slide 6 text

Hearing Vision Speech Motor Cognition Common Disabilites

Slide 7

Slide 7 text

Everyone can experience one of these at one point in their life

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Accessibility features benefits everyone!

Slide 10

Slide 10 text

Accessibility can also benefit you as a business

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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)

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

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”

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Assistive Technologies 16 Braille Display Screen reader Switches Face Control (Project Gameface)

Slide 17

Slide 17 text

You don’t have to reinvent the wheels. Android already has accessibility services that interacts with these assistive technologies.

Slide 18

Slide 18 text

18 Talkback - Screen reader services - Describe content out aloud - Users interact with gestures (single tap, double tap etc)

Slide 19

Slide 19 text

19 BrailleBack - Integration with braille display - Used together with Talkback - User interact using keys on display

Slide 20

Slide 20 text

20 Switch Access - Switches instead of taps - Scan items and highlight - User can interact with switches

Slide 21

Slide 21 text

21 Voice Access - Control hand-free - Show labels and grids - User interact device with voice commands

Slide 22

Slide 22 text

Write one time, works everywhere

Slide 23

Slide 23 text

What can you do?

Slide 24

Slide 24 text

Colors Do not use colors as the only/primary means of communication

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

Describe your image However, if an image is just for visual or stylistic purpose. Tell the system to skip these elements.

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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”

Slide 31

Slide 31 text

Describe clicks Row( modifier = Modifier .clickable(onClickLabel = "View Contact") { openContactPage() } ) { // Render Contents }

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Describe state change (for Boolean States ) MicrophoneControl( modifier = Modifier.toggleable(isMicrophoneOn) { isMicrophoneOn = !isMicrophoneOn } )

Slide 34

Slide 34 text

Describe state change (for multiple states) VolumeSlider(modifier = Modifier.semantics { stateDescription = "$volume" })

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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 }

Slide 37

Slide 37 text

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 }

Slide 38

Slide 38 text

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”

Slide 39

Slide 39 text

Merge components 6 taps to navigate through each item! 10 items would make it 60 taps!

Slide 40

Slide 40 text

Merge Components Row( modifier = Modifier .semantics(mergeDescendants = true) {} ) { // Render Contents }

Slide 41

Slide 41 text

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.

Slide 42

Slide 42 text

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{}) }

Slide 43

Slide 43 text

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{}) }

Slide 44

Slide 44 text

Quick Recap - Colors - Button Sizing - Describing Image - Describe actions (click, toggles, sliders) - Replace complex gestures with accessibility actions - Merge components

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Testing Accessibility

Slide 48

Slide 48 text

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() } }

Slide 49

Slide 49 text

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 ... ...

Slide 50

Slide 50 text

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)

Slide 51

Slide 51 text

https://www.magentaa11y.com/

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Accessibility: Building an Inclusive Mobile Application Aung Kyaw Paing Senior Consultant @ thoughtworks | GDE Android aungkyawpaing.dev