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

Young & Johnny

•

• NCC

•

·我是中途失明的視障者

·我是如何使用我的手機

·我所遇到的問題

大綱

https://fb.com/j796160836

Johnny SungMobile devices Developer

https://plus.google.com/+JohnnySung

http://about.me/j796160836

uPresen t e r

iOS Clienthttps://itunes.apple.com/app/id978059571

https://itunes.apple.com/app/id977146419

Mac Server

https://play.google.com/store/apps/details?id=com.johnnyworks.presenterAndroid Client

uPresen t e r

uPresen t e r

uPresen t e r for Wear

Ready to present

When presenting

for Apple WatchuPresen t e r

Ready to present When presenting

uPresen t e r

iOS Clienthttps://itunes.apple.com/app/id978059571

https://itunes.apple.com/app/id977146419

Mac Server

https://play.google.com/store/apps/details?id=com.johnnyworks.presenterAndroid Client

大綱

·我是工程師

·在開發上要注意什麼？

·對於無障礙調整的小撇步

Voice OveriOS

怎麼開·一般 > 輔助使用 > VoiceOver

快速開·一般 > 輔助使用 > 輔助使用快速鍵

快速開·Home 鍵連點三下，開啟選單

VoiceOver 手勢介紹

探索 (點選)

·點一下

(與 Talkback 相同)

選擇焦點

·左右滑動

(與 Talkback 相同)

點擊 (Click)

·點二下

(與 Talkback 相同)

·雙指點二下

·接聽 / 掛斷電話

·放音樂

·拍照

MagicTap

朗讀

·雙指向上滑

·從頭朗讀到結束

朗讀

·雙指向下滑一下

·從目前位置朗讀

到結束

翻頁 (定量)

·三指 向上 / 向下 滑

·向上 / 向下 捲一頁

(網頁瀏覽時使用)

翻頁 (定量)

·三指 向左 / 向右 滑

·向前 / 向後 捲一頁

(桌面翻頁時使用)

轉輪

·手指二指旋轉

轉輪

·動作 ·標題

·字元

·字詞

·語音速度

·容器

動作·刪除

·啟用項目（預設動作）

·標示為未讀

·以旗標標示

·更多

（很少 App 有支援...）

調整數值

·上下滑動

返回

·雙指左右來回掃動

(很像揉掉的手勢)

（因為很少 App 有支援...）

關閉螢幕

·三指點三下

（注意不要誤觸到）

Demo

LINE·貼圖預覽沒有焦點

? ? ?

愛評生活通·按鈕唸圖片名稱

1 2

launch_search, 按鈕launch_nearby, 按鈕

南山人壽行動智慧網

·按鈕唸圖片名稱

·二個焦點

1. 圖片按鈕

2. 純文字

icon_call, 按鈕

到府理賠

1

2

方便找

·二個焦點

1. 圖片按鈕

2. 純文字

·按鈕無法點選

noodle, 已變暗, 按鈕

麵食, 已變暗, 按鈕

1

2

食在方便

·焦點順序問題

·只會唸「按鈕」

雙蛋蛋餅, 鮪魚蛋餅 台北市萬華區中華路二段307巷 (南機場夜市) 南機場無名早餐蛋餅

食在方便

按鈕 按鈕 按鈕按鈕

·通通只唸「按鈕」

問題

...?

Accessibility for iOS

·設定替代文字

NSString *accessibilityLabel; NSString *accessibilityHint; UIAccessibilityTraits accessibilityTraits;

朗讀的架構 for iOS

我的最愛，按鈕，點二下來打開

accessibilityLabel accessibilityHintaccessibilityTraits

設定替代文字

• accessibilityLabel

• accessibilityHint

• accessibilityTraits

·假設 Spec 要你做一個這樣的按鈕...

按鈕

你可能會這樣做

空白按鈕圖片

在 Xcode 的樣子

唸起來就變這樣

“ ”, 按鈕, “ ”

accessibilityLabel accessibilityHint

accessibilityTraits

圖片的按鈕

你可能會這樣做

在 Xcode 的樣子

唸起來就變這樣

“btn.png”，按鈕

你還有可能會這樣做圖片的按鈕

文字

在 Xcode 的樣子

至於這個嘛...

唸起來就變這樣

“btn.png”，按鈕

我的最愛

·純文字

·只有背景圖片按鈕

·圖片上覆蓋感應區

按鈕製作方式

“btn.png”，按鈕

按鈕

·基本原則：從左而右，從上到下

·自訂順序

焦點順序

self.view.accessibilityElements = @[view01, view02];

偵測 VoiceOver 啟用狀態

·註冊通知UIAccessibilityVoiceOverStatusChanged

·判斷UIAccessibilityIsVoiceOverRunning()

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(voiceOverStatusChanged:) name:UIAccessibilityVoiceOverStatusChanged object:nil];

[[NSNotificationCenter defaultCenter] removeObserver:self name:UIAccessibilityVoiceOverStatusChanged object:nil];

註冊 Notifications

移除 Notifications

偵測 VoiceOver 啟用狀態

-(void)voiceOverStatusChanged:(NSNotification *)n { if (UIAccessibilityIsVoiceOverRunning()) { // Voice over is running } else { // Voice over is not running } }

判斷 VoiceOver 狀態

偵測 VoiceOver 啟用狀態

·移動焦點UIAccessibilityLayoutChangedNotification

·畫面更新 (會有動作音效) UIAccessibilityScreenChangedNotification

焦點跳移

http://www.deque.com/blog/dynamic-notifications/

焦點跳移

UIAccessibilityPostNotification( UIAccessibilityLayoutChangedNotification, view02);

移動焦點到某個元件上

畫面更新 (移動焦點到第一個元件上)

UIAccessibilityPostNotification( UIAccessibilityScreenChangedNotification, view01);

UIAccessibilityPostNotification( UIAccessibilityScreenChangedNotification, nil);

畫面更新，並移動焦點

提示訊息

UIAccessibilityPostNotification( UIAccessibilityAnnouncementNotification, @"hello");

-(BOOL) accessibilityPerformMagicTap { // Do something }

·實作

MagicTap (雙指點二下)

定義轉輪動作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];

定義轉輪動作- (BOOL) action01:(UIAccessibilityCustomAction *)action { // Do something return YES; }

- (BOOL) action02:(UIAccessibilityCustomAction *)action { // Do something return YES; }

開發除錯

·Accessibility Inspector (iOS Simulator)

·自己玩看看

TalkBackAndroid

安裝 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

設定 TTS 引擎·設定 > 無障礙設定 > 文字轉語音輸出

預設鍵盤·設定 > 語言與輸入設定 > 鍵盤與輸入法

預設鍵盤·變更鍵盤，選擇中文注音

開啟 TalkBack·設定 > 無障礙設定 > TalkBack

Talkback 手勢介紹

探索 (點選)

·點一下

(與 VoiceOver 相同)

選擇焦點

·左右滑動

(與 VoiceOver 相同)

點擊 (Click)

·點二下

(與 VoiceOver 相同)

捲動 (自由)

·雙指左右滑動

(會有音階的聲響)

捲動 (自由)

·雙指上下滑動

(會有音階的聲響)

捲動 (定量)

·畫一個 符號

(向右再往左滑)

（因為不好操作...）

>

常用選單

·畫一個 字

(向下 + 右滑)

L

常用選單

·暫停回應

·Talkback設定

·文字轉語音設定

常用選單

·從頂端開始閱讀

·拼出上一句話

·從下一個項目開始閱讀

·快速導覽

·向右 + 向下滑

顯示通知列

其他常用指令

Back 鍵 (單指向下 + 左滑)

Home 鍵 (單指向上 + 左滑)

最近應用程式 (單指向左 + 上滑)

·點二下，

第二下按住並拖曳

調整數值

（因為不好操作...）

Android 5.0 後 新增

·音量鍵可控制滑桿

·同時按 音量+ 與 音量 - ，暫停語音

·搖動手機，從下一個項目開始閱讀

Demo

方便找

·二個焦點

1. 圖片按鈕

2. 純文字 OK 超商

OK 超商按鈕

12

三總便民幫手1

2

三總便民幫手

該選上面還是選下面 ？

1

2

Yahoo! 超級商城

·按鈕焦點問題

·按鈕 對比度 問題

·按鈕 大小 問題

·頁面流程問題

Yahoo! 超級商城·焦點問題

1. 圖片

2. 外框

沒有名稱的按鈕, 47 TIGER 虎牌 540cc...

1

2

Yahoo! 超級商城·按鈕 大小 / 對比度 問題

（放大鏡模式）

新增商品 按鈕

#DBDBDB

背景

#F9F9F9

對比值 1.32

Yahoo! 超級商城·頁面流程問題

Yahoo! 超級商城·頁面流程問題

[ 加入至購物車 ]

·設定替代文字 contentDescription

Accessibility for Android

android:contentDescription=" "

myButton.setContentDescription(" ");

群組焦點設定 focusable / clickable 會被群組android:focusable="true"android:clickable="true"

群組焦點

<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>

群組焦點

TextViewRecent

TextView192.168.201.146

TextView11000

群組焦點

RelativeLayoutclickable

ImageView@drawable/computer

192.168.201.146, 11000, Recent

android:importantForAccessibility="auto"

• auto - ( ) • yes - Talkback • no - • noHideDescendants - Talkback

忽略群組焦點

群組焦點

·基本原則：從左而右，從上到下

·自訂順序

焦點順序

android:nextFocusUp="@+id/view01"android:nextFocusDown="@+id/view02"

android:accessibilityTraversalBefore="@+id/view1"android:accessibilityTraversalAfter="@+id/view2"

AccessibilityManager manager = (AccessibilityManager) getSystemService(Service.ACCESSIBILITY_SERVICE); if(manager.isEnabled()) { // Talkback is running} else { // Talkback is not running}

偵測 Talkback 是否開啟

焦點跳移

view.requestFocus();

要求焦點

<TextView android:text="Hello World!" android:layout_width="wrap_content" android:layout_height=“wrap_content"> <requestFocus /> </TextView>

提示訊息

view.announceForAccessibility("Hello");

API level 16

開發除錯

·顯示語音輸出

·樹狀結構偵錯

顏色

顏色·文字 與 背景 的對比度

·4.5 : 1 WCAG 2.0 AA compliance

·7 : 1 WCAG 2.0 AAA compliance

http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast

Web Content Accessibility Guidelines (WCAG) 2.0

顏色

http://snook.ca/technical/colour_contrast/colour.html

按鈕大小

·48 x 48 px (Google)

·44 x 44 px (Apple)

https://www.google.com/design/spec/usability/accessibility.html#accessibility-typeshttps://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

LayoutandAppearance.html

回顧·瞭解無障礙操作手勢

·圖片按鈕要加上替代文字

·留意焦點的順序，移除困惑的提示聲

·注意顏色對比度、按鈕大小

·對於複雜的 UI ，用按鈕吧

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