Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[MOPCON 2015] 談談行動裝置的 Accessibility

2,808 views

Published on

「什麼?這個字『唸』不出來?這到底是什麼功能?」這可能是很多盲人朋友在使用手機時心中的 OS。本議程將藉由簡單的例子 (Android / iOS) 來探討如何使用程式來解決。並從自身實際使用及教學的經驗,透過範例來了解什麼是友善的 APP,讓您的 APP 在絢麗外,也邁向無障礙 (Accessibility)。

Published in: Technology
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

[MOPCON 2015] 談談行動裝置的 Accessibility

  1. 1. Young & Johnny
  2. 2. • 
 • NCC •
  3. 3. ・我是中途失明的視障者 ・我是如何使用我的手機 ・我所遇到的問題 大綱
  4. 4. https://fb.com/j796160836 Johnny Sung Mobile devices Developer https://plus.google.com/+JohnnySung http://about.me/j796160836
  5. 5. uPresenter iOS Client https://itunes.apple.com/app/id978059571 https://itunes.apple.com/app/id977146419 Mac Server https://play.google.com/store/apps/details?id=com.johnnyworks.presenter Android Client
  6. 6. uPresenter
  7. 7. uPresenter
  8. 8. uPresenter for Wear Ready to present When presenting
  9. 9. for Apple WatchuPresenter Ready to present When presenting
  10. 10. uPresenter iOS Client https://itunes.apple.com/app/id978059571 https://itunes.apple.com/app/id977146419 Mac Server https://play.google.com/store/apps/details?id=com.johnnyworks.presenter Android Client
  11. 11. 大綱 ・我是工程師 ・在開發上要注意什麼? ・對於無障礙調整的小撇步
  12. 12. Voice Over iOS
  13. 13. 怎麼開 ・一般 > 輔助使用 > VoiceOver
  14. 14. 快速開 ・一般 > 輔助使用 > 輔助使用快速鍵
  15. 15. 快速開 ・Home 鍵連點三下,開啟選單
  16. 16. VoiceOver 手勢介紹
  17. 17. 探索 (點選) ・點一下 (與 Talkback 相同)
  18. 18. 選擇焦點 ・左右滑動 (與 Talkback 相同)
  19. 19. 點擊 (Click) ・點二下 (與 Talkback 相同)
  20. 20. ・雙指點二下 ・接聽 / 掛斷電話 ・放音樂 ・拍照 MagicTap
  21. 21. 朗讀 ・雙指向上滑 ・ 從頭朗讀到結束
  22. 22. 朗讀 ・雙指向下滑一下 ・從目前位置朗讀
 到結束
  23. 23. 翻頁(定量) ・三指 向上 / 向下 滑 ・ 向上 / 向下 捲一頁
 (網頁瀏覽時使用)

  24. 24. 翻頁(定量) ・三指 向左 / 向右 滑 ・ 向前 / 向後 捲一頁
 (桌面翻頁時使用)

  25. 25. 轉輪 ・手指二指旋轉
  26. 26. 轉輪 ・動作 ・標題 ・字元 ・字詞 ・語音速度 ・容器
  27. 27. 動作 ・刪除 ・啟用項目(預設動作) ・標示為未讀 ・以旗標標示 ・更多 (很少 App 有支援...)
  28. 28. 調整數值 ・上下滑動
  29. 29. 返回 ・雙指左右來回掃動
 (很像揉掉的手勢) (因為很少 App 有支援...)
  30. 30. 關閉螢幕 ・三指點三下 (注意不要誤觸到)
  31. 31. Demo
  32. 32. LINE ・貼圖預覽沒有焦點 ? ? ?
  33. 33. 愛評生活通 ・按鈕唸圖片名稱 1 2 launch_search, 按鈕launch_nearby, 按鈕
  34. 34. 南山人壽行動智慧網 ・按鈕唸圖片名稱 ・二個焦點 1. 圖片按鈕 2. 純文字 icon_call, 按鈕 到府理賠 1 2
  35. 35. 方便找 ・二個焦點 1. 圖片按鈕 2. 純文字 ・ 按鈕無法點選 noodle, 已變暗, 按鈕 麵食, 已變暗, 按鈕 1 2
  36. 36. 食在方便 ・焦點順序問題 ・只會唸「按鈕」 雙蛋蛋餅, 鮪魚蛋餅
 台北市萬華區中華路二段307巷 (南機場夜市) 南機場無名早餐蛋餅
  37. 37. 食在方便 按鈕 按鈕 按鈕 按鈕 ・通通只唸「按鈕」
  38. 38. 問題
  39. 39. ...?
  40. 40. Accessibility for iOS ・設定替代文字 NSString *accessibilityLabel; NSString *accessibilityHint; UIAccessibilityTraits accessibilityTraits;
  41. 41. 朗讀的架構 for iOS 我的最愛,按鈕,點二下來打開 accessibilityLabel accessibilityHint accessibilityTraits
  42. 42. 設定替代文字 • accessibilityLabel • accessibilityHint • accessibilityTraits
  43. 43. ・假設 Spec 要你做一個這樣的按鈕... 按鈕
  44. 44. 你可能會這樣做 空白按鈕 圖片
  45. 45. 在 Xcode 的樣子
  46. 46. 唸起來就變這樣 “ ”, 按鈕, “ ” accessibilityLabel accessibilityHint accessibilityTraits
  47. 47. 圖片的按鈕 你可能會這樣做
  48. 48. 在 Xcode 的樣子
  49. 49. 唸起來就變這樣 “btn.png”,按鈕
  50. 50. 你還有可能會這樣做 圖片的按鈕 文字
  51. 51. 在 Xcode 的樣子
  52. 52. 至於這個嘛...
  53. 53. 唸起來就變這樣 “btn.png”,按鈕 我的最愛
  54. 54. ・純文字 ・只有背景圖片按鈕 ・圖片上覆蓋感應區 按鈕製作方式 “btn.png”,按鈕 按鈕
  55. 55. ・基本原則:從左而右,從上到下 ・自訂順序 焦點順序 self.view.accessibilityElements = @[view01, view02];
  56. 56. 偵測 VoiceOver 啟用狀態 ・註冊通知
 UIAccessibilityVoiceOverStatusChanged ・判斷
 UIAccessibilityIsVoiceOverRunning()
  57. 57. [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(voiceOverStatusChanged:) name:UIAccessibilityVoiceOverStatusChanged object:nil]; [[NSNotificationCenter defaultCenter] removeObserver:self name:UIAccessibilityVoiceOverStatusChanged object:nil]; 註冊 Notifications 移除 Notifications 偵測 VoiceOver 啟用狀態
  58. 58. -(void)voiceOverStatusChanged:(NSNotification *)n { if (UIAccessibilityIsVoiceOverRunning()) { // Voice over is running } else { // Voice over is not running } } 判斷 VoiceOver 狀態 偵測 VoiceOver 啟用狀態
  59. 59. ・移動焦點
 UIAccessibilityLayoutChangedNotification ・畫面更新 (會有動作音效)
 UIAccessibilityScreenChangedNotification 焦點跳移 http://www.deque.com/blog/dynamic-notifications/
  60. 60. 焦點跳移 UIAccessibilityPostNotification( UIAccessibilityLayoutChangedNotification, view02); 移動焦點到某個元件上 畫面更新(移動焦點到第一個元件上) UIAccessibilityPostNotification( UIAccessibilityScreenChangedNotification, view01); UIAccessibilityPostNotification(
 UIAccessibilityScreenChangedNotification, nil); 畫面更新,並移動焦點
  61. 61. 提示訊息 UIAccessibilityPostNotification( UIAccessibilityAnnouncementNotification, @"hello");
  62. 62. -(BOOL) accessibilityPerformMagicTap { // Do something } ・實作 MagicTap (雙指點二下)
  63. 63. 定義轉輪動作 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];
  64. 64. 定義轉輪動作 - (BOOL) action01:(UIAccessibilityCustomAction *)action { // Do something return YES; } - (BOOL) action02:(UIAccessibilityCustomAction *)action { // Do something return YES; }
  65. 65. 開發除錯 ・Accessibility Inspector
 (iOS Simulator) ・自己玩看看
  66. 66. TalkBack Android
  67. 67. 安裝 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
  68. 68. 設定 TTS 引擎 ・設定 > 無障礙設定 > 文字轉語音輸出
  69. 69. 預設鍵盤 ・設定 > 語言與輸入設定 > 鍵盤與輸入法
  70. 70. 預設鍵盤 ・變更鍵盤,選擇中文注音
  71. 71. 開啟 TalkBack ・設定 > 無障礙設定 > TalkBack
  72. 72. Talkback 手勢介紹
  73. 73. 探索 (點選) ・點一下 (與 VoiceOver 相同)
  74. 74. 選擇焦點 ・左右滑動 (與 VoiceOver 相同)
  75. 75. 點擊 (Click) ・點二下 (與 VoiceOver 相同)
  76. 76. 捲動(自由) ・雙指左右滑動 (會有音階的聲響)
  77. 77. 捲動(自由) ・雙指上下滑動 (會有音階的聲響)
  78. 78. 捲動(定量) ・畫一個 符號
 (向右再往左滑) (因為不好操作...) >
  79. 79. 常用選單 ・畫一個 字
 (向下 + 右滑) L
  80. 80. 常用選單 ・暫停回應 ・Talkback設定 ・文字轉語音設定
  81. 81. 常用選單 ・從頂端開始閱讀 ・拼出上一句話 ・從下一個項目開始閱讀 ・快速導覽
  82. 82. ・向右 + 向下滑 顯示通知列
  83. 83. 其他常用指令 Back 鍵 (單指向下 + 左滑) Home 鍵 (單指向上 + 左滑) 最近應用程式 (單指向左 + 上滑)
  84. 84. ・點二下,
 第二下按住並拖曳 調整數值 (因為不好操作...)
  85. 85. Android 5.0 後 新增 ・音量鍵可控制滑桿 ・同時按 音量+ 與 音量 - ,暫停語音 ・搖動手機,從下一個項目開始閱讀
  86. 86. Demo
  87. 87. 方便找 ・二個焦點 1. 圖片按鈕 2. 純文字 OK 超商 OK 超商按鈕 1 2
  88. 88. 三總便民幫手 1 2
  89. 89. 三總便民幫手 該選上面還是選下面 ? 1 2
  90. 90. Yahoo! 超級商城 ・按鈕焦點問題 ・按鈕 對比度 問題 ・按鈕 大小 問題 ・頁面流程問題
  91. 91. Yahoo! 超級商城 ・焦點問題 1. 圖片 2. 外框 沒有名稱的按鈕, 47 TIGER 虎牌 540cc... 1 2
  92. 92. Yahoo! 超級商城 ・按鈕 大小 / 對比度 問題 (放大鏡模式) 新增商品 按鈕 #DBDBDB 背景 #F9F9F9 對比值 1.32
  93. 93. Yahoo! 超級商城 ・頁面流程問題
  94. 94. Yahoo! 超級商城 ・頁面流程問題 [ 加入至購物車 ]
  95. 95. ・設定替代文字 contentDescription Accessibility for Android android:contentDescription=" " myButton.setContentDescription(" ");
  96. 96. 群組焦點 設定 focusable / clickable 會被群組 android:focusable="true"
 android:clickable="true"
  97. 97. 群組焦點
  98. 98. <RelativeLayout android:clickable="true"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <ImageView
 android:id="@+id/icon"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/computer"/>
 
 <TextView
 android:id="@+id/ip"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@+id/icon"
 android:text="192.168.4.107"/>
 
 <TextView
 android:id="@+id/port"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@+id/icon"
 android:layout_below="@+id/ip"
 android:text="11000"/>
 </RelativeLayout> 群組焦點
  99. 99. TextView Recent TextView
 192.168.201.146 TextView 11000 群組焦點 RelativeLayout clickable ImageView @drawable/computer 192.168.201.146, 11000, Recent
  100. 100. android:importantForAccessibility="auto" • auto - ( ) • yes - Talkback • no - • noHideDescendants - Talkback 忽略群組焦點 群組焦點
  101. 101. ・基本原則:從左而右,從上到下 ・自訂順序 焦點順序 android:nextFocusUp="@+id/view01"
 android:nextFocusDown="@+id/view02" android:accessibilityTraversalBefore="@+id/view1"
 android:accessibilityTraversalAfter="@+id/view2"
  102. 102. AccessibilityManager manager = (AccessibilityManager) getSystemService(Service.ACCESSIBILITY_SERVICE); 
 if(manager.isEnabled()) {
 // Talkback is running
 } else {
 // Talkback is not running
 } 偵測 Talkback 是否開啟
  103. 103. 焦點跳移 view.requestFocus(); 要求焦點 <TextView
 android:text="Hello World!"
 android:layout_width="wrap_content"
 android:layout_height=“wrap_content"> 
 <requestFocus /> 
 </TextView>
  104. 104. 提示訊息 view.announceForAccessibility("Hello"); API level 16
  105. 105. 開發除錯 ・顯示語音輸出 ・樹狀結構偵錯
  106. 106. 顏色
  107. 107. 顏色 ・文字 與 背景 的對比度 ・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
  108. 108. 顏色 http://snook.ca/technical/colour_contrast/colour.html
  109. 109. 按鈕大小 ・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
  110. 110. 回顧 ・瞭解無障礙操作手勢 ・圖片按鈕要加上替代文字 ・留意焦點的順序,移除困惑的提示聲 ・注意顏色對比度、按鈕大小 ・對於複雜的 UI ,用按鈕吧
  111. 111. 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

×