[MOPCON 2015] 談談行動裝置的 Accessibility
•
35 likes•3,568 views
「什麼？這個字『唸』不出來？這到底是什麼功能？」這可能是很多盲人朋友在使用手機時心中的 OS。本議程將藉由簡單的例子 (Android / iOS) 來探討如何使用程式來解決。並從自身實際使用及教學的經驗，透過範例來了解什麼是友善的 APP，讓您的 APP 在絢麗外，也邁向無障礙 (Accessibility)。
Recommended
More Related Content
Viewers also liked
Viewers also liked (18)
Similar to [MOPCON 2015] 談談行動裝置的 Accessibility
Similar to [MOPCON 2015] 談談行動裝置的 Accessibility (20)
More from Johnny Sung
More from Johnny Sung (20)
[MOPCON 2015] 談談行動裝置的 Accessibility
- 2. • • NCC •
- 4. https://fb.com/j796160836 Johnny Sung Mobile devices Developer https://plus.google.com/+JohnnySung http://about.me/j796160836
- 8. uPresenter
- 9. uPresenter
- 10. uPresenter for Wear Ready to present When presenting
- 11. for Apple WatchuPresenter Ready to present When presenting
- 14. Voice Over iOS
- 15. 怎麼開 ・一般 > 輔助使用 > VoiceOver
- 16. 快速開 ・一般 > 輔助使用 > 輔助使用快速鍵
- 18. VoiceOver 手勢介紹
- 19. 探索 (點選) ・點一下 (與 Talkback 相同)
- 21. 點擊 (Click) ・點二下 (與 Talkback 相同)
- 25. 翻頁(定量) ・三指 向上 / 向下 滑 ・ 向上 / 向下 捲一頁 (網頁瀏覽時使用)
- 26. 翻頁(定量) ・三指 向左 / 向右 滑 ・ 向前 / 向後 捲一頁 (桌面翻頁時使用)
- 27. 轉輪 ・手指二指旋轉
- 30. 調整數值 ・上下滑動
- 33. Demo
- 36. 南山人壽行動智慧網 ・按鈕唸圖片名稱 ・二個焦點 1. 圖片按鈕 2. 純文字 icon_call, 按鈕 到府理賠 1 2
- 37. 方便找 ・二個焦點 1. 圖片按鈕 2. 純文字 ・ 按鈕無法點選 noodle, 已變暗, 按鈕 麵食, 已變暗, 按鈕 1 2
- 40. 問題
- 41. ...?
- 42. Accessibility for iOS ・設定替代文字 NSString *accessibilityLabel; NSString *accessibilityHint; UIAccessibilityTraits accessibilityTraits;
- 43. 朗讀的架構 for iOS 我的最愛，按鈕，點二下來打開 accessibilityLabel accessibilityHint accessibilityTraits
- 44. 設定替代文字 • accessibilityLabel • accessibilityHint • accessibilityTraits
- 46. 你可能會這樣做 空白按鈕 圖片
- 47. 在 Xcode 的樣子
- 48. 唸起來就變這樣 “ ”, 按鈕, “ ” accessibilityLabel accessibilityHint accessibilityTraits
- 49. 圖片的按鈕 你可能會這樣做
- 50. 在 Xcode 的樣子
- 53. 在 Xcode 的樣子
- 54. 至於這個嘛...
- 59. [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(voiceOverStatusChanged:) name:UIAccessibilityVoiceOverStatusChanged object:nil]; [[NSNotificationCenter defaultCenter] removeObserver:self name:UIAccessibilityVoiceOverStatusChanged object:nil]; 註冊 Notifications 移除 Notifications 偵測 VoiceOver 啟用狀態
- 60. -(void)voiceOverStatusChanged:(NSNotification *)n { if (UIAccessibilityIsVoiceOverRunning()) { // Voice over is running } else { // Voice over is not running } } 判斷 VoiceOver 狀態 偵測 VoiceOver 啟用狀態
- 64. -(BOOL) accessibilityPerformMagicTap { // Do something } ・實作 MagicTap (雙指點二下)
- 65. 定義轉輪動作 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];
- 66. 定義轉輪動作 - (BOOL) action01:(UIAccessibilityCustomAction *)action { // Do something return YES; } - (BOOL) action02:(UIAccessibilityCustomAction *)action { // Do something return YES; }
- 68. TalkBack Android
- 69. 安裝 Google 注音輸入法 https://play.google.com/store/apps/details? id=com.google.android.apps.inputmethod.zhuyin 前置作業 安裝 語記 (原訊飛語音 + ) https://play.google.com/store/apps/details? id=com.iflytek.vflynote
- 70. 設定 TTS 引擎 ・設定 > 無障礙設定 > 文字轉語音輸出
- 71. 預設鍵盤 ・設定 > 語言與輸入設定 > 鍵盤與輸入法
- 73. 開啟 TalkBack ・設定 > 無障礙設定 > TalkBack
- 74. Talkback 手勢介紹
- 75. 探索 (點選) ・點一下 (與 VoiceOver 相同)
- 77. 點擊 (Click) ・點二下 (與 VoiceOver 相同)
- 81. 常用選單 ・畫一個 字 (向下 + 右滑) L
- 84. ・向右 + 向下滑 顯示通知列
- 85. 其他常用指令 Back 鍵 (單指向下 + 左滑) Home 鍵 (單指向上 + 左滑) 最近應用程式 (單指向左 + 上滑)
- 87. Android 5.0 後 新增 ・音量鍵可控制滑桿 ・同時按 音量+ 與 音量 - ，暫停語音 ・搖動手機，從下一個項目開始閱讀
- 88. Demo
- 89. 方便找 ・二個焦點 1. 圖片按鈕 2. 純文字 OK 超商 OK 超商按鈕 1 2
- 90. 三總便民幫手 1 2
- 92. Yahoo! 超級商城 ・按鈕焦點問題 ・按鈕 對比度 問題 ・按鈕 大小 問題 ・頁面流程問題
- 93. Yahoo! 超級商城 ・焦點問題 1. 圖片 2. 外框 沒有名稱的按鈕, 47 TIGER 虎牌 540cc... 1 2
- 94. Yahoo! 超級商城 ・按鈕 大小 / 對比度 問題 （放大鏡模式） 新增商品 按鈕 #DBDBDB 背景 #F9F9F9 對比值 1.32
- 97. ・設定替代文字 contentDescription Accessibility for Android android:contentDescription=" " myButton.setContentDescription(" ");
- 98. 群組焦點 設定 focusable / clickable 會被群組 android:focusable="true" android:clickable="true"
- 99. 群組焦點
- 102. android:importantForAccessibility="auto" • auto - ( ) • yes - Talkback • no - • noHideDescendants - Talkback 忽略群組焦點 群組焦點
- 104. AccessibilityManager manager = (AccessibilityManager) getSystemService(Service.ACCESSIBILITY_SERVICE); if(manager.isEnabled()) { // Talkback is running } else { // Talkback is not running } 偵測 Talkback 是否開啟
- 107. 開發除錯 ・顯示語音輸出 ・樹狀結構偵錯
- 108. 顏色
- 109. 顏色 ・文字 與 背景 的對比度 ・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
- 111. 按鈕大小 ・48 x 48 px (Google) ・44 x 44 px(Apple) https://www.google.com/design/spec/usability/accessibility.html#accessibility-types https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ LayoutandAppearance.html
- 114. References • https://developer.apple.com/library/ios/documentation/UIKit/Reference/ UIAccessibility_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