Let’s make more inclusive Android apps

A presentation at A11y Camp in November 2019 in Sydney NSW, Australia by Allison Ravenhall

Slide 1

Slide 1

Let’s build more inclusive apps

DevFest Melbourne 2019

Allison Ravenhall - @RavenAlly

Slide 2

Slide 2

Tweet accessibly!

Set up your Twitter app to add text descriptions to your photos.

Profile > Settings and privacy > Accessibility > Compose image descriptions

Slide 3

Slide 3

~1 in 5 Aussies have a disability

Slide 4

Slide 4

Android platform accessibility features

Mobility: Voice Access, Accessibility menu, Switch Access, Display size

Vision: TalkBack, Font size, Invert colours, Magnification, Colour correction

Cognition: Select to Speak, Remove animations, Dark theme

Hearing: Sound amplifier, Mono audio, Live Transcribe, Captions, Hearing aid integration

Slide 5

Slide 5

Google Accessibility Scanner app

Check your app

Slide 6

Slide 6

Tap the tick

The Accessibility Scanner app presents as a blue button with a white tick over any app. Tap the tick on the screen you want to review

Slide 7

Slide 7

Review outlined items

The Accessibility Scanner outlines elements with accessibility issues. Tap on each outlined item to see an individual issue, tap the list button in the title bar for a complete list, or tap the export button in the title bar to export the issue list to email or a document.

Slide 8

Slide 8

Colour contrast…

The Accessibility Scanner will report on contrast issues, including the current contrast ratio and the minimum required ratio to conform to WCAG 2.1 AA.

Slide 9

Slide 9

Target size…

The Accessibility Scanner reports on interactive elements that are less than 48dp in either dimension.

Slide 10

Slide 10

No label…

The Accessibility Scanner will report on interactive elements that don’t have a label that a screen reader can announce.

Slide 11

Slide 11

Why does no label matter?

The TalkBack app (part of the Android Accessibility Suite) will demonstrate the importance of a screen reader label.

Slide 12

Slide 12

Video demonstration

30-second captioned video demonstrating TalkBack screen reader in action in the Australia Post app. The final element is announced as “Unlabelled, button”.

Slide 13

Slide 13

contentDescription

Use the contentDescription attribute to provide a screen reader label independent of the visible content.

Slide 14

Slide 14

Skim content by type

TalkBack enables users to skim by element type rather than visiting every element linearly, saving time and effort.

Slide 15

Slide 15

accessibilityHeading="true"

Skimming by headings is one of the most popular forms of screen reader navigation. In order to support this, set the accessibilityHeading attribute to true for any TextView that is performing as a heading.

Slide 16

Slide 16

Screen reader users prefer Apple (August 2019)

Pie chart showing distribution of screen reader mobile platform users.

Other, 3.50%

Android, 27.50%

Apple, 69%

Source: https://webaim.org/projects/screenreadersurvey8/#mobileplatforms

Slide 17

Slide 17

… but Android is rising

Apple: 33% (Dec 10) > 59% (May 12) > 65% (Jan 14) > 70% (Jul 15) > 76% (Oct 17) > 69% (Aug 19)

Android: 4% (Dec 10) > 8% (May 12) > 16% (Jan 14) > 21% (Jul 15) > 22% (Oct 17) > 28% (Aug 19)

Others: 63% (Dec 10) > 37% (May 12) > 19% (Jan 14) > 10% (Jul 15) > 2% (Oct 17) > 4% (Aug 19)

Source: https://webaim.org/projects/screenreadersurvey8/#mobileplatforms

Slide 18

Slide 18

Hands-free interaction

Another interaction method is exclusively by voice. Google has published the Voice Access app to enable full voice-only operation of Android devices.

Slide 19

Slide 19

90-second video where two Voice Access users: Stephanie (C4/C5 split-level quadriplegic) and Jeff (essential tremor) explain the importance of being able to use their devices with voice.

Slide 20

Slide 20

Dynamic number labels

Voice Access appears as a series of dynamic number labels superimposed over any Android interface where it detects interactive elements. If the user doesn’t know the programmatic label (e.g. contentDescription), they can activate the element by its number instead.

Slide 21

Slide 21

Support portrait and landscape orientation

Apps should support both portrait and landscape on devices that support multiple orientations. Stephanie has her phone mounted on a stand, so is not readily able to turn her device around. A portrait-locked app would force her to twist her neck to read the screen.

Slide 22

Slide 22

Make motion interaction optional

Apps should make motion interaction optional wherever possible. Jeff’s hands shake and tremor uncontrollably so he is highly likely to trigger motion-activated functions unintentionally.

Slide 23

Slide 23

Presentation summary

Update your Twitter settings and label your photos

Play with Android accessibility settings

Use the Accessibility Scanner

Try out TalkBack and Voice Access

Support portrait & landscape

Add motion alternatives

Slide 24

Slide 24

Links

Accessibility Scanner: bit.ly/a11y-scanner

TalkBack: bit.ly/a11y-talkback

TalkBack gestures: bit.ly/talkback-commands

TalkBack captions: Settings > Accessibility > TalkBack > Settings > Dev settings > Display speech output

Voice Access: bit.ly/a11y-voice-access

Voice Access commands: bit.ly/voice-access-commands

Google accessibility team: twitter.com/googleaccess

Google accessibility dev guides: google.com/accessibility/for-developers/