Speaker: Young Fang, Johnny Sung --- How visually impaired people use their phone? How mobile developer fix their problems they encountered? Here is the small tips for that.

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