大家好我是 Coseeing 的設計師 Shirley ，這次的 Case Study 系列，想要帶著大家一起探索不同產品的無障礙體驗，找出設計師們可以學習和改善的地方。此系列的第一篇文章，我們將介紹 Slack ，並著重探索螢幕閱讀器用戶的操作體驗，就讓我們一起看下去吧 😊
本文結構
- 為何從螢幕閱讀器可操作的角度切入思考是好的策略？
- 開始探索 Slack !
- Slack 值得借鑑的好設計
- Slack 可以更好的地方
在設計產品介面時，如果考慮到螢幕閱讀器的操作，不僅能讓視覺障礙者訪問，還能全面照顧到其他類型的障礙者以及在特定情境下的非障礙者需求。
例如，螢幕閱讀器使用者通常需要透過鍵盤操作來移動焦點，因此在設計螢幕閱讀器的操作體驗時，必須考慮鍵盤操作的情境，這也同時讓純粹依賴鍵盤操作的肢體障礙者也能被含蓋其中。
又者，螢幕閱讀器會獲取元素上的文字標籤來進行內容的朗讀，因此我們必需給與元素一個可訪問名稱，同時有了正確地可訪問名稱也可以讓語音控制的使用者能順利操作。
Slack 是一個以團隊協作和溝通的軟體平台，因此本次我們以兩個團隊協作常見的場景來進行螢幕閱讀器的易用性測試，並邀請團隊中的重度視覺障礙者夥伴來做為測試者！
有別於其他即時通訊軟體， Slack 特別將通訊分成三個資訊層級 — 頻道、訊息和對話串，讓相關的討論集中在一起，不會干擾到其他討論，幫助團隊成員更有效地進行交流和協作。
在即時通訊的情境下，我們會著重觀察螢幕閱讀器用戶在多層的資訊結構，如何接收即時的消息和掌握對話脈絡。
互動元素皆可聚焦，讓螢幕閱讀器用戶也享有相同功能！
針對同一個功能，Slack 透過讓所有互動元素都可以聚焦，使螢幕閱讀器用戶能夠享有同等功能。舉例來說：在對話情境，掌握訊息內容才是最重要的，對訊息表達心情是個有趣但相對不必要的功能，為了避免太多資訊在畫面， Slack 是採用 Hover 的方式觸發這個功能，必須將鼠標移到訊息上，才可以點選表情。
以鍵盤與螢幕閱讀器的操作來說，用戶很難做出 Hover 的動作，因此當遇到有 Hover 操作時則需要有另一種鍵盤操作的替代方式，此外，透過讓互動元素可以聚焦，才能讓螢幕閱讀器讀出元素資訊，而 Slack 的表情功能是有做到這一點的，也有按照對話情境的常用頻率，將表情功能觸發按鈕的聚焦順序放在比較後面的位置。
你可能覺得每個互動元素可以聚焦聽起來非常基本，但是許多應用程式常會忽略這點，特別是複雜的功能元件。比如說 Notion 的 database ，螢幕閱讀器可以聚焦欄位並編輯，但卻無法聚焦在 open page 的按鈕這個互動元素上，進而使用鍵盤觸發他的功能。這樣對於鍵盤與螢幕閱讀器的用戶來說，就無法享有 database 這種彈性資料收納的好功能。
符合通用規則的快捷鍵結構，又能針對常見場景給予自定義快捷鍵，增加使用效率
在任務中，我們看到用戶可使用 F6 鍵直接在面板之間切換，在面板內則可以使用上下鍵在功能元件間導航。如果該功能元件可互動，則可以使用 Enter 觸發元件的功能。如果是個含有許多可互動元素的複雜功能元件，則也可以使用 Tab 往其內部的互動元素聚焦。
舉例來說：在首頁面板能夠使用上下鍵切換不同頻道和私訊，使用 Enter 進入對應的對話面板。在對話面板中，用戶也能夠使用上下鍵在特定對話中的功能元件中移動， 焦點可以從訊息編輯元件，移動至訊息檢視元件。如果用戶在閱讀過程中，想要對某則訊息表達心情，則可以使用 Tab 鍵移動到該則訊息的表情按鈕上，並按下 Enter 鍵。
Slack 不只符合 W3C 常見的 Pattern，每個面板內的導航體驗一致，降低用戶學習成本。另外，也針對常用場景提供許多快捷鍵（可參考此 Slack 鍵盤捷徑說明），讓鍵盤與螢幕閱讀器的用戶們可以更輕鬆使用。
當用戶在不同面板、功能元件和互動元素間移動時，螢幕閱讀器能報讀足夠的操作引導與結果回饋
既然 Slack 的結構如此複雜，如何讓螢幕閱讀器報讀明確的資訊是非常重要的。我們在任務中看到， Slack 有針對報讀作出特別處理，當用戶在不同功能元件之間切換時，螢幕閱讀器會先清楚報讀這是哪層結構，且會多補充許多介面上沒有的文字。
舉例來說：當用戶進入至訊息內的對話串時，螢幕閱讀器會報讀目前處在的結構或群組，並簡述結構的內容，讓用戶快速理解狀況，如果不是當下想瀏覽互動的內容的話就可以快速判斷並離開。
輕鬆找到未讀訊息和對話串
Slack 作為一個通訊軟體，如何讓用戶發現未讀訊息顯得十分重要，而對於螢幕閱讀器的用戶來說，吸收資訊是線性的，如果未讀訊息分散不同頻道或私訊，會需要花很多時間聆聽。 Slack 針對此場景，有非常彈性的功能設定，其中這三個對於螢幕閱讀器用戶非常友善
- 將未讀的頻道或私訊在主功能列上置頂
- 將未讀訊息區域的入口在主功能列上置頂
- 使用快捷鍵切換至未讀訊息區域
即時回報輸入狀況和新訊息
針對即時對話，Slack 在輸入框下方會顯示「 {傳送訊息者}正在輸入訊息」，若有新訊息畫面也會自動往下滾動，讓用戶掌握新訊息。
我們在任務中看到，只要用戶聚焦在這個功能元件上，螢幕閱讀器會自動報讀 「 {傳送訊息者}正在輸入訊息」 。而當用戶的焦點不在那個功能元件上但有新訊息進來時仍會自動讀出 「 {傳送訊息者}{訊息內容}」。因此即使用戶的焦點在其他位置仍可以收到通知，降低錯過訊息的風險。
訊息報讀：報讀順序應考慮資訊重要性和資料長度
如同前面提及，在每個結構和群組切換時，Slack 都能報讀足夠的操作引導與結果回饋。然而，在任務中我們仍看到小缺點：Slack 在報讀對話中的訊息群組時，訊息內容的報讀順序優先於訊息時間和回覆狀況。由於訊息內容常常是不可控，例如：對方貼上 Youtube 預覽或是貼網址，都會讓內容過長，導致用戶需要全部聽完，才可以聽到其他重要的資訊，是非常花時間的。
即時通訊場景，用戶難以注意到另一個對話串
在 Slack 中，同個頻道中用兩個對話串討論不同主題內容是常見的情境，雖然說 Slack 能做即時回報輸入狀況和新訊息，但在多個對話串同時進行時，用戶並無法知道另一個對話串已經更新。我們的受訪者說，通常要等到下一次進入 Slack ，確認有哪些未讀訊息時，才會發現原來有當時未讀的對話串。
凸顯設定檔案和圖片的替代文字設定功能入口
在 Slack 中，雖然有可以加入圖片的替代文字的功能，但是入口過深、功能名稱不明確，很難讓用戶察覺到。
如果沒有設定替代文字，螢幕閱讀器在讀取訊息中附加的圖片時，只會報讀「檔名+未標示的圖片」(例如：img123.jpg 未標示的圖片 連結)，螢幕閱讀器用戶完全無法了解圖片的資訊或摘要。如果 Slack 能在夠更凸顯填寫替代文字的功能，並且提供用戶填寫指引，可以增加用戶填寫的動機。
以上就是這次我們探索螢幕閱讀器用戶使用 Slack 體驗的內容，可以看見 Slack 在清楚的介面操作之外，也顧及到了鍵盤和螢幕閱讀器操作的體驗，並且找到很好的平衡。希望能夠藉由這個設計研究和案例分析，刺激設計師們思考，並在設計視覺介面以外，能夠參考這些互動案例，多與工程師和 PＭ 討論實現的可能性！
那我們下次見！
參考資料
專有名詞說明
- 元素：指單一物件，例如連結、按鈕、圖片等（若為可點擊，則稱為可互動元素）。
- 功能元件：由一群元素組成的特定功能介面。
- 面板：由多個功能元件組成的一個區塊。
