設計練等區：UX設計案例與ACCESSIBILITY設計
為螢幕閱讀器設計，打造看得懂也聽得懂的 UI 元件
在日常生活中，你有因指示不良而誤用設計物的經驗嗎？，如果看到了下面這張圖上的門，你會認為它可以如何開啟呢？
這扇門的門把上寫著 Push，但是卻又貼著左右打開的貼紙，不免讓人困惑難到這是可以推又可以左右拉的門，但真實答案更令人意外，其實這是一扇自動門，門把只是裝飾用的。
這扇門的指意容易讓人採用錯誤的操作方式，例如用推的動作開門，這不僅危險，也容易造成門的損壞。
在 Norman 提出的六大設計原則中，其中的指意（Signifiers）原則，強調設計物應該要能向人們傳達適當的行為方式的指示方法，包括符號、聲音、以及所有能被知覺的信號。目的在於避免使用者用錯誤的行為使用設計物。
對於軟體 UX 設計師來說，透過 UI 元件之間的視覺距離、UI 元件的形狀、顏色的變化，讓使用者快速理解系統的功能和相關回饋，已經是熟悉的工作。然而，對於視障使用者來說， 如果設計師沒有特別針對元件進行設計的話，那麼螢幕閱讀器就只會依照元件上的文字進行報讀，此時就容易因視障使用者無法感受到元件的視覺變化，而因此誤用功能並導致無法完成任務的情況發生。
我們來看看幾個常見的 UI 元件，忽視螢幕閱讀器使用者的設計例子。
收藏功能：只用圖形暗示功能效果、顏色變化表達動作回饋
設計師常以愛心形狀暗示「收藏功能」，並且運用顏色的填色變化暗示收藏狀態「已收藏」「未收藏」，大部份的明眼使用者也習慣這樣的做法。然而，若沒有針對螢幕閱讀器進行語意設計的話，視障使用者是無法感知的。
舉例來說：台大課程網中，明眼使用者可以透過按鈕功能效果「收藏課程」，並且透過顏色改變，了解自己的動作改變了課程狀態。但是對於螢幕閱讀器來說，因為此UI 元件上本身沒有文字，工程師在語法上也只有寫按鈕的語法，沒有任何語意補充，因此螢幕閱讀器只能知道這是按鈕，但卻無法知道此按鈕的功能為何，更無法知道目前狀態的變化。
開啟麥克風功能：功能效果和狀態的語意說明混淆
企業會議軟體 Teams 中的麥克風，則是遇到功能和狀態語意說明不清楚的問題。當 Focus 在麥克風 Icon 上時，螢幕閱讀器會先報讀字面上的內容和元素類型「麥克風，按鈕」，並接著報讀「靜音，你目前位於….」。
雖然 Teams 有針對螢幕閱讀器做設計，加上了語意「靜音」做補充說明，但其實只寫「靜音」對螢幕閱讀器的使用者而言其實仍然是相當不明確，無法區分「靜音」是功能效果還是狀態，究竟是說明「現在為靜音狀態」，還是說明功能是「關閉麥克風達到靜音」，使用者會感到困惑，想想如果使用者是在正式的企業會議場合時，這樣子的設計會讓使用者多麼緊張和焦慮了。
補充語意，讓螢幕閱讀器可報讀
綜合以上的案例，可以知道針對螢幕閱讀器做語意補充非常重要，那麼要如何讓螢幕閱讀器能夠報讀 UI 元件，並讓使用者清楚知道UI 元件的功能呢？
我們先簡單說明螢幕閱讀器的報讀原則，一般來說，如果沒有額外處理的話，螢幕閱讀器只會按照 UI 元件上顯示的文字進行報讀。
此外，除了 UI 元件上的文字外，HTML 中有兩個屬性，可以補充 UI 語意讓螢幕閱讀器讀出來，分別是 Aria-label 和 Aria-description。這兩個屬性的文字內容皆不會在視覺上顯現。最理想的情況是能夠透過 UI 元件上的文字讓使用者識別功能和狀態。然而，有時我們不得不使用較長的文字來敘述 UI 元件的功能和狀態，此時，若希望 UI 元件保持視覺上簡潔，則建議設計師考慮螢幕閱讀器報讀這兩個屬性的特性，來分別撰寫對應的文字。
- label：只要加上此屬性，螢幕閱讀器便會報讀其文字。如果 UI 元件上沒有文字(例如 icon 按鈕)或是元件上的文字無法清楚讓使用者識別功能，建議優先使用這個屬性補充語意文字。
- description：就算加上了這個屬性，在螢幕閱讀器的快速閱讀模式下並不會讀出來，需要使用者改用詳細閱讀模式時才會讀出。螢幕閱讀器使用者通常是在 UI 元件上的文字或 label 文字敘述不夠清楚而無法理解 UI 元件用途時，才會改用詳細模式來瀏覽頁面，因此 description 建議是放額外更多提示的補充文字。
突然看到 HTML 屬性，是不是感到心慌慌，沒關係，你可以跟著我們按照以下的步驟盤點：
在開始設計語意之前，可以試著先想想：
- 這個 UI 元件是什麼功能？請具體用文字描述？（例如：開啟麥克風）
- 這個 UI 元件有幾種狀態？是為了向用戶暗示什麼？（例如：麥克風關閉中）
思考完後，一起檢查
- 目前 UI 元件上的視覺文字，你認為足以表示元件的功能和狀態嗎？
- 若否，你認為可以用調整視覺文字的方式，同時讓明眼使用者和視障使用者都有好的體驗嗎？
- 若否，請嘗試用 label 和 description 語法補充語意。
我們以串接不同軟體為名的 Zapier 的 Toggle 來示範
- 這個 UI 元件的功能：關閉 Zap
- 這個 UI 元件的狀態：向使用者表示 Zap 開啟中
- 目前視覺文字已表達狀態 On，但是無法讓使用者清楚知道關閉功能
- 為了維持視覺簡潔性，我認為不適合再補充文字。
- 我認為需要讓螢幕閱讀器知道下列事項，以識別功能
label ：關閉 Zap
description： Zap 狀態為開啟中（補充 On 的資訊，非必要）
建議大家在撰寫補充語意時，要清楚寫主詞、動詞和受詞。舉下圖來說，若要為作為編輯功能的鉛筆 Icon 做語意補充，「編輯」並不屬於一個充足的內容，因為圖上有好多個區塊的編輯按鈕，應該寫成「編輯姓名」「編輯帳號名稱」，使用者才可以清楚知道功能的指向。
以上就是在實踐設計視覺無障礙的 UI 元件時，設計師可依循的步驟清單，對於工程師如何實做補充語意的有好奇，歡迎參考以下的文章，與工程師一起無痛實現無障礙！
你的支持是我們的最大動力 💪
如果喜歡我們的文章，可以按下拍手👏來支持我們
也歡迎追蹤我們的medium跟Facebook粉絲專頁，讓我們提供你更多優質的無障礙知識跟新知！
本文作者：Shirley
從經濟跨到設計的女子，喜歡思考如何用設計改變自己在乎的議題，歡迎一起找我討論你在乎的議題，讓這個世界變得更好！
