活用手機上的螢幕閱讀器 (三)

實作篇～如何成功傳送Line訊息＆無障礙 App 設計與檢測相關建議

Published in

a11yvillage

8 min readApr 14, 2024

在前面的文章中，我們介紹了手機上的螢幕閱讀器，包括 iOS 的旁白及 Android 上的 TalkBack，並針對它們分別介紹一些基本的操作方式與特色。今天，我們想帶讀者來看看，在實際生活中，如何利用手機螢幕閱讀器來完成任務，並從中學習一些無障礙 App 的開發與檢測要點，讓我們開始吧！

操作範例：傳送 Line 訊息

我們就以最常用的通訊軟體文字聊天為範例，來看看應該如何透過螢幕閱讀器進行操作，鼓勵你可以拿起身旁的手機、開啟螢幕閱讀器，跟著我們一起來操作：

(以下的步驟原則上不分 iOS 或 Android，如果兩者有不同時會特別註明)

假設 Line 已經放在你的主畫面上，觸摸它或使用單指向左/右滑動將焦點移到圖示上，單指點兩下來開啟 app。
開啟後，首先我們可以留意在畫面底部有不同的標籤列 (Tab)，觸摸他可以聽到相關的提示，例如旁白會報讀「已選取，聊天，標籤列，5之2」

這樣的提示可清楚告訴使用者物件的類型是標籤列、它的名稱是聊天、是被選取的狀態以及總共有5個標籤項目與他是在標籤列中的第2個項目等等資訊。標籤列所含有的資訊可說是相當豐富，對於視障使用者而言是相當友善且清楚的一種元件。

3. 切換到「聊天」標籤列後，通常我們可以直接觸摸螢幕中上位置來定位至聊天對象的清單，接著我們就可以單指向右滑動來尋找要聊天的對象。

不過，我們可以特別留意一下，若使用 iOS 旁白，我們可以在聊天對象或群組上直接單指向上或向下滑動來取用相關的執行動作，例如：「釘選」、「關閉提醒」等。這是由於此時我們的轉輪已設定在「動作」這個項目，並且開發者有設定快捷動作(註)。

註：在 iOS 中開發者可以自訂旁白轉輪可操作的快捷動作，有興趣者可以參考此頁面。

4. 單指點兩下來進入聊天對象後，我們可以觸摸螢幕下方中間的位置來找到「文字欄位」，通常大多數的通訊軟體的輸入框都在此位置，視障者也會依此經驗來推測 App 的畫面佈局，能夠更快上手。

5. 點兩下文字欄位會開啟螢幕鍵盤，此時由於 Line 是套用 iOS 或 Android 原生的輸入方式，因此視障者可以使用聽寫、手指抬起輸入、兩指分開輸入、點字螢幕鍵盤等我們在上篇文章介紹的不同方式進行文字輸入。

6. 接下來我們可以針對聊天訊息進行其他操作，例如回應表情符號、分享或收回訊息等。一般沒有螢幕閱讀器的狀態下，我們會使用長按的方式，而在螢幕閱讀器開啟時，長按的手勢變成「點兩下並按住」，也就是快速點兩下，但第二下需持續按著，如此就會跳出浮動的操作選單。不過長按的手勢其實不是那麼友善好達成的手勢，建議可以將觸發動作的方式設計成如步驟3說明的轉輪的作法。轉輪不但可以快速存取更多操作選項外，對於手部障礙的使用者而言，也是比較有善的。

Messenger 即是以轉輪操作進行收回訊息的例子，有興趣的讀者可以自行嘗試看看，這種作法讓收回訊息能夠更直接快速。另外，針對這樣的前景浮動視窗，我們也可以特別留意螢幕閱讀器的焦點是否會受被覆蓋的項目影響，原則上當浮動視窗出現時，螢幕閱讀器就不該移動至背景的物件上，避免使用者混淆或難以點選。此例來說，Line 就是一個好的設計，當用一根手指在螢幕上探索時，只會聽到浮動視窗內的項目，若移出浮動視窗則會聽到「關閉」的提示，此時單指點兩下就可以關閉了。

7. 最後，若我們想要返回到聊天室清單，可以按下畫面左上方的「返回」按鈕。然而，我們也可以使用螢幕閱讀器支援的系統返回手勢：iOS 旁白為兩指在螢幕上掃動 (可以想像快速畫一個 Z 字形)；Android TalkBack 則是單指先向下再向左滑動，皆可以返回至上一個畫面。

無障礙 App 設計與檢測相關建議

根據上述的操作範例，相信你對於搭配螢幕閱讀器完成日常任務有個基本的概念了。以下我們整理一些在檢測 App 時，我們可以特別留意以下幾個重點與目標：

物件選取或切換的狀態：如前述步驟2 中，螢幕閱讀器可清楚告訴使用者當前選取的標籤列為何。我們可以特別留意，是不是所有的物件狀態皆能清楚被讀出來，尤其是標籤列的選取、核取方塊的勾選狀態、切換開關等。設計良好值得拿來觀摩參考的例子包括 iOS 上的控制中心，或 Android 上的快捷設定，如果你實際使用螢幕閱讀器操作的話就會聽到每個切換開關均有清楚的狀態提示。
旁白的自訂轉輪動作：在開發 iOS app 時，可以思考如何利用旁白中轉輪的「動作」來完成常見的操作，可參考的範例相當多，包括郵件、訊息、備忘錄、主畫面 app 等都有這樣的設計。目前所知 Android TalkBack 並沒有提供此相關 API，也期待未來在 TalkBack 能夠加入此功能，使第三方 App 也能夠更靈活的自訂 TalkBack 的快捷動作。
參考類似軟體，避免大幅度的介面差異：從上述步驟4中我們可以看到對視障者來說，過去的相關經驗對於熟悉一個新的 App 介面相當重要，在開發 App 時我們可以多參考其他類似 App 的共同設計，以幫助視障者快速上手。若有較大幅度的更改，也需考慮是否有充足的引導資訊來幫助使用者熟悉介面並完成任務。
引入原生設計，如鍵盤、標籤列等：原則上，使用原生提供的物件來設計能一定程度保證物件的無障礙程度。上述步驟5提到的鍵盤就是典型的例子，一些反例出現在部分銀行 App 中的輸入鍵盤，如果是自行開發的介面，除非有特別做無障礙的處理，不然通常比較難以讓螢幕閱讀器流暢地輸入，例如無法支援手指抬起輸入、兩指分開輸入，只能按照平時點選物件的方式輸入，有時甚至鍵盤上的字母無法被正確讀出來。因此儘可能採用系統原生的物件是最為安全的。
確認焦點是否可到達浮動的選單或視窗：若 App 中有使用浮動的選單或視窗，如上述步驟6所展示的操作視窗，必須確保當浮動視窗出現時，螢幕閱讀器能否使用單指左右滑動的手勢將交點移至其上，並正確報讀出來。
背景物件是否影響螢幕閱讀器的操作：當浮動的選單或視窗出現時，必須確保螢幕閱讀器無法再移至背景物件上。例如，有些銀行的 App，當跳出提示框時，螢幕閱讀器的焦點仍可在畫面其他位置移動，這樣會導致視障者難以察覺出現的前景視窗，也可能直接忽略該視窗並點選背景上的物件而無法獲得任何回饋而操作失敗、使用體驗下降。
返回按鈕是否夠清晰，且是否支援使用系統手勢來完成：大多數的 App 皆會設有返回前頁的按鈕，我們可以留意此按鈕位置是否固定 (如左上角)、是否容易觸摸到、是否清楚標示「返回」的功能，甚至是否可支援系統的返回手勢，讓視障者無須找到返回按鈕即可快速執行返回動作。

延伸閱讀：無障礙檢查工具

除了前述提到的實際操作外，在開發或檢測 App 時，我們也可以善用相關的工具，讓我們快速檢查 App 的無障礙設計，包括文字大小、顏色對比、替代文字等等是否符合基本規範。可以使用的工具包括 Xcode 中的 Accessibility Inspector，以及 Google Play Store 上的 Accessibility Scanner App 等，有興趣的讀者可以再深入了解使用，相信能夠幫助你更快速地找到改善方向，使你的 App 更加無障礙！

無障礙的檢測可說是一項永無止境的工作，且需要反覆進行測試及改善，才能越加貼近使用者的需求，提高使用體驗。隨著行動及穿戴裝置的普及，各種不同需求的使用者都應享有平等的使用權利。因此各種應用程式的無障礙都值得我們去關注並一同努力，以創造更加友善且無障礙的科技使用環境，讓科技真正造福所有使用者！

參考資料：