The document discusses mobile accessibility, focusing on techniques for making iOS applications usable for visually impaired users through features like VoiceOver. It provides guidance on setting up accessibility labels, hints, and traits in Xcode, along with practical gestures for navigating apps. Additionally, it highlights best practices regarding button sizes and color contrast to comply with accessibility standards.

1. About Mobile
Accessibility
Young & Johnny

2. Young Feng
• Director of braille teaching
at Taiwan Foundation for the Blind.
• The committee of NCC.
• Trainer of web accessibility testing.

3. https://fb.com/j796160836
Johnny Sung
Mobile devices Developer
https://plus.google.com/+JohnnySung
http://about.me/j796160836

4. • I'm a visually impaired people
• How I use my iPhone
• The issues that I encountered
Agenda

5. Agenda
• I'm a mobile developer
• A few things you need to do
• The tips for making an
accessible app

6. Voice Over
iOS

7. How to open
• General > Accessibility > VoiceOver

8. Set the hotkey
• General > Accessibility > Accessibility Shortcut

9. Test it
• Press Home key for three times to open the menu.

10. VoiceOver Gestures

11. Explore (Tap)
• Tap with one finger
(Same as Talkback)
Frequency：

12. Switch focus
• Swipe left or right
(Same as Talkback)
Frequency：

13. Click
• Double Tap
(Same as Talkback)
Frequency：

14. • Two finger double tap
• Pick up the phone
• Play the music
• Take pictures
MagicTap
Frequency：

15. • Two finger swipe up
Frequency：
Read all from first object

16. Read all from selected item
• Two finger swipe down
Frequency：

17. Scroll up / down
• Three finger swipe
up or down
Frequency：

18. Rotor
• Two finger rotate
Frequency：

19. Rotor
• Actions
• Characters
• Words
• Speech rate
• Containers
• Headings

20. Actions
• Activate item (default action)
• Delete
• More
• Flag
• Mark unread
(Require app support)

21. Changing value
• Swipe up or down
Frequency：

22. Go back
• Two finger scrub
back & forth
(Require app support)Frequency：

23. Toggle screen off
• Three finger tap
3 times
(Notice this gesture)
Frequency：

24. Demo

25. The problem is

26. Buttonbuttonbutton...?

27. Accessibility for iOS
• Setting the descriptions
NSString *accessibilityLabel;
NSString *accessibilityHint;
UIAccessibilityTraits accessibilityTraits;

28. What The System reads
Favorites，button，double tap to open
accessibilityLabel accessibilityHint
accessibilityTraits

29. Setting in Xcode
• accessibilityLabel
• accessibilityHint
• accessibilityTraits

30. • If spec tell you wanna put a button
on screen like this
A scenario

31. You probably done by this way...
An empty button
Pictures

32. What you do in Xcode

33. System will read...
“ ”, Button, “ ”
accessibilityLabel accessibilityHint
accessibilityTraits

34. A button with background
You probably done by this way...

35. What you do in Xcode

36. System will read...
“btn.png”，button

37. You probably done by this way...
A button with background
Label

38. What you do in Xcode

39. Well...

40. There will be two problems
“btn.png”，button
Favorites

41. • plain text
• Button with background
• A empty button
Notices the button that you make
“btn.png”，button
Button

42. • Basic principles：From left to
right, from up to bottom
Focus sequences

43. • Custom sequences by using
Focus sequences
self.view.accessibilityElements
= @[view01, view02];

44. Detect VoiceOver Status
• Register the notificationsUIAccessibilityVoiceOverStatusChanged
• Determine VoiceOver statusUIAccessibilityIsVoiceOverRunning()

45. [[NSNotificationCenter defaultCenter]
addObserver:self
selector:@selector(voiceOverStatusChanged:)
name:UIAccessibilityVoiceOverStatusChanged
object:nil];
[[NSNotificationCenter defaultCenter]
removeObserver:self
name:UIAccessibilityVoiceOverStatusChanged
object:nil];
Register Notifications
Remove Notifications
Detect VoiceOver Status

46. -(void)voiceOverStatusChanged:(NSNotification *)n {
if (UIAccessibilityIsVoiceOverRunning()) {
// Voice over is running
} else {
// Voice over is not running
}
}
Determine whether VoiceOver is on or off
Detect VoiceOver Status

47. • Move focus toUIAccessibilityLayoutChangedNotification
• Update whole screens (Sound included)
UIAccessibilityScreenChangedNotification
Moving the focus
http://www.deque.com/blog/dynamic-notifications/

48. Moving the focus
UIAccessibilityPostNotification(
UIAccessibilityLayoutChangedNotification, view02);
Move focus to specify element
Update whole screens
UIAccessibilityPostNotification(
UIAccessibilityScreenChangedNotification, view01);
UIAccessibilityPostNotification(
UIAccessibilityScreenChangedNotification, nil);
Update whole screens and Move focus to specify element
(focus on first top-left element)

49. Announcement messages
UIAccessibilityPostNotification(
UIAccessibilityAnnouncementNotification, @"hello");

50. -(BOOL) accessibilityPerformMagicTap {
// Do something
}
• Implement the MagicTap actions
MagicTap (Two finger double tap)

51. Declare the rotor actions
UIAccessibilityCustomAction *a1 =
[[UIAccessibilityCustomAction alloc]
initWithName:@"Action 1"
target:self
selector:@selector(action01:)];
UIAccessibilityCustomAction *a2 =
[[UIAccessibilityCustomAction alloc]
initWithName:@"Action 2"
target:self
selector:@selector(action02:)];
self.myButton.accessibilityCustomActions
= @[a1, a2];

52. Declare the rotor actions
- (BOOL) action01:(UIAccessibilityCustomAction *)action {
// Do something
return YES;
}
- (BOOL) action02:(UIAccessibilityCustomAction *)action {
// Do something
return YES;
}

53. Debugging tools
• Accessibility Inspector
(iOS Simulator)
• Manual testing

54. Colors

55. Contrast ratio with text and background
• 4.5 : 1WCAG 2.0 AA
compliance
• 7 : 1WCAG 2.0 AAA compliance
http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast
Web Content Accessibility Guidelines (WCAG) 2.0

56. Contrast checker
http://snook.ca/technical/colour_contrast/colour.html

57. Button size
• 48 x 48 px (Google)
• 44 x 44 px (Apple)
https://www.google.com/design/spec/usability/accessibility.html#accessibility-types
ps://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.h

59. Q & A

60. References
• https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIA
ccessibility_Protocol/
• http://www.deque.com/blog/dynamic-notifications/
• https://eyes-
free.googlecode.com/svn/trunk/documentation/android_access/index.html
• https://www.udemy.com/accessibility-features-on-android/
• http://blog.supertop.co/post/117642258462/custom-accessibility-options-in-
unread
• http://www.programcreek.com/java-api-
examples/index.php?api=android.view.accessibility.AccessibilityManager