This document provides an overview of how to test the accessibility of native mobile apps. It covers: 1) The key differences between native and hybrid apps and their accessibility features on Android and iOS. 2) How to use the main mobile screen readers, TalkBack and VoiceOver, including their gestures. 3) Methods for testing important accessibility elements like images, headings, tables, and forms. 4) Other accessibility testing areas like buttons, links, text resizing, colors, and dialogs. 5) Examples of proper and improper implementation of various accessibility features.

1. Native Testing for Newbies
Susan Hewitt
Accessibility Auror
Sarah Witherwax
Accessibility Consultant

2. 1

3. This morning…
What we will cover
• Accessibility features of
Android and iOS
• How to use mobile
screen readers
• Testing methods for
important accessibility
requirements.
What we won’t cover
• ABCs of Accessibility
• Mobile Web Site testing
• Code-specific
remediation
2

4. Agenda for Hour One
3
• Native vs. HTML
• Accessibility features of Android and iOS
• How to use TalkBack
• How to use VoiceOver
• Images
• Headings
• Tables
• Practice exercises

5. What We’ll Be Using Today
4
• Deque University (App Store & Google Play, Free)
• Pixel Ruler (App Store & Google Play, free trial)
• Other sample apps:
– Target
– BBC
– Built-in device apps

6. Native vs. HTML
5
?

7. Native vs HTML: Breakdown
Native Apps
• Can use all device
features
• Can use offline
• Higher dev cost
• Users must download
apps and updates
• Better UI
HTML
• Easy to develop and
maintain
• Cheaper to make
• Only need one version
for all platforms
• Inconsistent support for
some HTML mark-up
across platforms and
browsers.
6

8. How to tell the difference between Native
and Hybrid?
7
Native apps do not have
heading levels or pinch
to zoom capability.
Hybrid apps and web
have more options on
the Rotor.

9. Features for Visually Impaired
iOS
• VoiceOver Screen
reader
• Adjustable font sizes
• Zoom
• Color options
• Reduce Motion
Android
• TalkBack Screen
reader
• BrailleBack
• Adjustable display &
font sizes
• Magnification
• Color options
8

10. Features for Other Impairments
iOS
• Cognitive
– Speak Selection
– Guided Access
• Motor & Physical
– Switch Control
– Assistive Touch
– Touch Accommodations
• Hearing
– Captions
– Audio Descriptions
– Hearing Aid Mode
– LED Flash alert
Android
• Cognitive
– Text-to-Speech
• Motor & Physical
– Voice Access
– Switch Access
– Touch and Hold
Delay
• Hearing
– Captions
9

11. Gestures
10
Mobile screen readers replace standard
touch gestures.

12. Using TalkBack
11
• All TalkBack gestures use one finger.
• The shortcut on some phones can be tricky.
But some models will show output on screen.
• Swipe left and right through items
• Tap twice to activate item.
• Global context menu – down to right
• Local context menu – up then right

13. Using VoiceOver - Turning it on
12
Turn on VO shortcut:
Settings > General >
Accessibility > Accessibility
Shortcut.

14. Using VoiceOver - Navigating
13
• To read a page swipe one finger to
the right and left to go backwards.
• To skip through blocks of content
swipe up/down with three fingers.
• Flip through screens with three
fingers to the left or right.
• Double tap anywhere on the screen
to activate an element. Element will
be highlighted when focused.

15. Using VoiceOver - Navigating
14
Use the Rotor to navigate
by elements.
Options available on
native:
– Text fields
– Vertical nav
– Audio description
– Containers
– Headings

16. Practice
15
Open your favorite app and use the gestures
we just learned to navigate.

17. Images
16
Focus image using screen reader:
Output:
“Target card, Disney Gift card $100”
Output:
“Big birds Nesting albatrosses
counted from space”
The decorative image is ignored
and the text is read.

18. Headings
17
Headings provide a clear
description of each section’s
content and provide users an
overview of how the content is
structured. Heading levels are
not announced, only “heading”.
VoiceOver Output:
“Basic Demonstrations, heading”
TalkBack does not announce
headings.

19. Tables
18
Navigate horizontally
through tables by flicking left
and right. Reading order
must convey the row and
column header text for each
data cell.
Output for Voiceover and
Talkback:
“Minimum Balance,
Savings, $1”

20. Practice Time
19
Open your favorite app and test images and
headings (if available, tables).

21. Agenda for Hour Two
20
• Buttons vs Links
• Reading order/focus order
• Practice!
• Device orientation
• Touch Interaction
• Custom Gestures
• Color
• Text Resize
• Language settings
• Form Inputs and Labels
• Practice!

22. Buttons & Links
21
All elements that perform actions have the
role of buttons except those that
Launch a browser outside of the app. Those
have to role of link.

23. Reading and focus order
22
Android and iOS:
• Navigate with screen reader from top to
bottom either by swiping left to right or using a
read all command.
• Ensure content is in a logical and intuitive
order. (Visual order does not have to match
reading order unless it changes the meaning.)
• Ensure focus moves from element to element
in a logical and predictable order.

24. Device Orientation
23
App should
not be locked
to one
orientation.
If we fits we
sits

25. Testing Orientation
24
Android
Verify “Auto-rotate screen” screen is turned on.
iOS
Verify orientation lock setting is not toggled on.
1. Launch app while holding device in either portrait or
landscape orientation.
2. Ensure app automatically displays in the mode the
device is held in.
3. Physically rotate device to the opposite of the current
orientation.
4. Verify:
• Visual display adjusts to new orientation;
• Navigational order stays logical and consistent;
• App is still operable.

26. Custom Gestures
25
Developers have the ability to create custom gestures.
For example, if double tap is created as a custom gesture and is the
only way to complete an action screen reader users will not have
access to that action. Because the screen reader might reserve
double tap to activate an item.
Verify standard gestures are not overridden:
– Turn on assistive technology.
– Activate menus,
– Fill in form fields,
– Trigger buttons that expand/collapse content,
– Scroll down and swipe,
– The expected result is that all functionality should be achievable.

27. Touch Target Size
26
Active zone of an actionable
element must be large enough for
the average fingertip to touch.
Specs:
• Android: 48pt x 48pt
• Apple: 44pt x 44pt
• WCAG 2.1: 44 CSS px
• BBC real world
• measurement: 9mm -11mm

28. Touch Target Size testing
27
• Problems with android tools
• Mapping to css px
• Options pixel ruler app, hand measuring

29. Testing Color Contrast
28
Use a desktop tool such as Deque
Color Contrast Calculator, Google
analyzer or Color Contrast Analyser.
To test:
1. Take a screenshot on the
device.
2. Open screenshot on desktop.
3. Extract colors with
eyedropper and test.

30. Color alone used to differentiate
29
Current selection indicated by color alone:

31. Using additional differentiator
30
Current selection indicated by color and additional
thick underline:

32. Larger Text
31
Apps should
support Dynamic
Type that will let
users adjust to
their preferred
reading size.

33. Text resizing
32
Supports dynamic text:
Controls respond to text
size change and text is set
to wrap.
Does not support dynamic
text: Form elements
disappear off-screen,
some text is cut off.
Note: Do NOT use
zoom or screen
magnification.

34. Forms – Visible Labels
.
33
Don’t just use
placeholders.
Do keep labels
near controls.

35. Forms – Text Fields
Testing:
• Put focus on field
• Expected:
– TalkBack: “Edit box,
Phone or email”
– VoiceOver: “Phone or
email, text field, double
tap to edit”
34

36. Forms - Radios and checkboxes
35
VoiceOver Output:
“Payment Due, selected,
Select the notification you
wish to set up, button”
TalkBack Output:
“Not checked, Email, checkbox for
Preferred Contact Method(s)”

37. Forms - Pickers
36
VoiceOver Output :
"Birthday. January. Picker
item. Adjustable. Swipe up or
down with one finger to
adjust the value.”
TalkBack Output:
"Set a Date”
"Edit box, 1/25/17, for Date for
payment (mm/dd/yy format)”

38. Forms - Android Spinners
37
TalkBack Output: “Email drop down list, not checked, other”
On Focus Editing field

39. Agenda for Hour Three
38
• Error reporting
• Moving Content
• Tabs, Menus, and Accordions
• Progress Bars
• Switches and toggles
• Sliders and Page Controls
• Dialogs, Notifications, and Alerts
• FINAL EXAM!

40. Incorrect form input and error message
39
Label and error
message are not
programmatically
associated to input.
So the label, text field
and error message
independently
identified.

41. Form input with error message
40
Voiceover output:
“Name, text field,
error, this field is
required.”

42. Navigation - Tabs
41
TalkBack output:
“Photos, tab, 2 of 3
button”
Tabs must announce which tab they are and if they’re
selected.
Voiceover output: “Selected,
audio podcasts, 1 of 2”

43. Navigation - Menus
42
TalkBack: “Open navigation drawer, button”
VoiceOver: “Menu, button, shows the menu
to navigate to other file views to change
user settings and to switch users.”
TalkBack: “Opened navigation drawer opened.
Showing account Susan Hewitt, susan
hewitt@deque.com”
VoiceOver: “Signed in as Susan Hewitt”

44. Accordions
43
• Accordion element announce its state.
• Next swipe puts focus on the first expanded item.
TalkBack
Closed: “Rewards, collapsed”
Opened: “Rewards, expanded”
VoiceOver
Closed: “Monday”
Opened: “Monday, expanded”

45. Progress Bar
44
Voiceover output: "Account Creation,
Progress 20%” The visible label
announces as part of the accessible
name.
TalkBack Output: "20 percent, Progress bar
for Account Creation"

46. Switches and Toggles
45
Switches & toggles each must
announce their on/off state as well
as their label when they have focus.

47. Sliders and Page Controls
46
Must have a programmatically
associated visible label with
accessible name and value.
TalkBack output: "Seek control, 50%
for Find Deals with APR”
VoiceOver output: "Find Deals with
APR 50% adjustable Swipe up or
down with one finger to adjust the
value."
Page control shows the position of the
current page in a list of pages. A solid
dot denotes the current page.
Voiceover output: “Compass, 1 of 2,
swipe up or down to adjust value.
TalkBack Output:

48. Dialogs
47
In the example
triggering the
”Open a modal
dialog" button,
focus moves to
the first item in
the dialog view,
”Thank you".

49. FINAL EXERCISE
48
• Use checkpoints covered to test Google Play
on Android or Health on iOS.

50. Thanks!
49
• Mobile Accessibility Links:
http://a11yrevolution.com/mobile.html
• Susan Hewitt:
https://www.linkedin.com/in/hewittsusan/
• Sarah Witherwax
sarah.witherwax@deque.com