在我們之前的文章《讓視覺元素富含文字訊息：可訪問名稱與描述》中提過：
在頁面上我們常會看到使用各種視覺圖標來呈現資訊內容，像是看到「放大鏡」圖標就會知道這是一個查詢功能、看到「齒輪」就代表著設定。
雖然善用圖標可以讓內容看起來更豐富，但如果沒有給予它文字訊息的話，對於螢幕閱讀器使用者來說就只是一個個不知何用的物件。
以 Google Docs 為例，如果這些 Icon 按鈕沒有加入可訪問名稱的話，它們就會是一排「按鈕」、「按鈕」、「按鈕」
有許多文章也會有如何寫替代文字的教學，不過著重強調於增強 SEO 的部分，例如商品圖片如何下替代文字等等。而這篇文章主要是針對數位產品中使用者需要互動的元件來帶大家了解實際操作上，有怎麼樣的常見 UI 元素會需要替代文字，作為開發者又要怎麼寫出清晰易懂的文字呢？這篇文章會以 W3C 提供的內容為基礎，加上常見實際案例來帶大家一次上手！
數位產品中，有以下幾種常見的元素會需要考慮替代文字與可訪問名稱：
Icon 元素
![Icon 元素示意圖，展示五個常見圖示，由左至右依序為：電話、資料夾、DOC 文件、新增使用者、密碼鎖。]Icon 按鈕元素示意圖，圖片來源：A11y 新手村。
很多時候設計師會使用 Icon 來代表特定的含義或作視覺裝飾。例如我們會使用「pdf」、「mp3」等 Icon 來代表檔案類型，又例如我們會使用 Icon 配上文字標籤來作為按鈕或是下拉選單的選項。
關於可訪問名稱的規則，這邊提供大家兩個判斷方法：
- Icon 是否為純粹的裝飾性元素：放不放 Icon，並不會造成任何使用者對這個功能的理解與使用
- Icon 旁邊是否有表達同樣意思的文字元素：例如在「增加使用者」按鈕旁邊的加號 Icon
![Icon 元素的可訪問名稱使用原則示意圖，分為左右兩種情況。左側說明：純粹裝飾性元素，或旁邊已有相同文字元素時，不需要可訪問名稱，範例為「刪除檔案」按鈕（圖示加文字）與「增加使用者」按鈕（圖示加文字）。右側說明：Icon 具有功能意義時，可以考慮加上可訪問名稱，範例包含 DOC 檔案圖示對應「履歷書.doc」、電話圖示對應「0900-000-000」、外部連結圖示對應「參考連結，在新視窗開啟」。]Icon元素的可訪問名稱圖例，圖片來源：A11y 新手村。
如果 Icon 旁邊有代表一樣意思的文字，或是純粹是裝飾性要素而不具有任何的功能，那我們可以不用為它們加上可訪問名稱，因為文字要素已經達成含義，如「增加使用者」前面的加號 Icon 符號。
相反地，如果這些 Icon 具有功能意義的話，我們就可以思考該怎麼寫可訪問名稱來讓這些螢幕閱讀器使用者獲得同等的資訊。
常見例子如電話☎的 Icon 來代表使用者的電話、斜上箭頭代表「連結在新頁面開啟」等，都可以加上可訪問名稱來讓使用者了解 Icon 代表的意涵。
Icon 按鈕
很重要的一點： Icon 按鈕必須都要加上可訪問名稱唷！（重要的事加粗體）
按鈕作為可互動元素，我們都可以預期按下按鈕之後網站會幫我們實行某些事情（例如：按下搜尋的放大鏡按鈕就會開始搜尋等），而沒有加入可訪問名稱的話，這些按鈕對於螢幕閱讀器使用者就會變成猜猜樂遊戲，不知道按下去會發生什麼事情。
那麼，該怎麼寫 Icon 按鈕的可訪問名稱呢？這邊也告訴大家一個思考的小技巧：
想像如果這個Icon按鈕原本是一個文字按鈕，你會想寫什麼呢？
例如如果是出現在雲端硬碟軟體中的星星按鈕，那可能會是「加入收藏」，一個向下的按鈕可能代表「下載檔案」。一個加號按鈕，如果是在使用者管理介面，那可能會是「新增使用者」；在訊息軟體中，可能會是「新增訊息」。
具體應該要怎麼寫會根據產品的語境變化，不過就跟你不會在介面上放一個十五個字的按鈕一樣，我們會建議可訪問名稱應該要保持簡短。如果想要補充更多細節，也可以參考我們之前提到過的可訪問描述，這篇文章就不展開說明了。
Logo
另一個幾乎每個網站與產品都會遇到的例子就是產品Logo，特別是網頁的左上角，很常都會放一個Logo來增加品牌識別，並作為回到首頁的快捷方式。
這邊將Logo分成兩種：
Logo 連結
當 Logo 圖像本身是個連結的時候，我們與W3C會建議使用「產品名稱」加上「主要功能」。例如如果是A11y新手村的部落格Logo連結的話，就可以是「A11y新手村首頁」。
如果連結中有Logomark加文字，例如Logomark圖片加上文字標籤的「A11y新手村」時，這邊的Logomark就可以不用一定要加上同樣的可訪問名稱（例如「A11y新手村」），來避免不必要的重複資訊。
註：不過如果可以寫上不重複的資訊在圖片的可訪問名稱上會更好
這邊思考的原則跟Icon元素相似：當有文字標籤，且文字標籤具有同樣意涵與用途時，我們就可以省略可訪問名稱。
純粹的Logo圖像
當只是一個純粹的Logo圖像，例如在推廣網頁中展示不同客戶公司時，我們可以考慮將產品或公司名稱作為可訪問名稱。
使用者圖片
使用者圖片可能有幾種常見用途：
- 純粹的圖像資訊：例如點擊進入個人頁面後可以看到會員的圖片。
- 作為連結：尤其常見在社交軟體中，使用者圖片同樣作為可以連結至詳細頁面的快捷方式。
- 作為下拉式選單的按鈕：常見放在網站右上角，點開會出現選單進行各種設定操作或登出。
下面我們一個一個來詳細說明：
純粹的圖像資訊
作為純粹的圖像資訊，你可以選擇像是「使用者圖片」、「{使用者名稱}的圖片」、「{使用者名稱}」等描述方式。根據具體情境，你也可以選擇要不要將這個資訊報讀給使用者。
作為連結
當使用者圖片作為連結的時候，我們可以描述圖片連結的目的地：例如「{使用者名稱}的頁面」、「{帳號名稱}」、「{使用者名稱}，詳細頁面」等，都是實際在產品中出現的例子，主要目標是讓你的使用者能夠感知並知道該圖片連結的目的地為何。
作為下拉式選單的按鈕
在這種情況下，作為一個重要的互動要素，我們要像Icon按鈕一樣思考它的可訪問名稱應該叫什麼。邀請看到這邊的你跟我一起進行一場腦力激盪：你會怎麼思考這個可訪問名稱呢？
視覺直覺上，我們可能會想描述圖像內容，例如：「使用者圖片」或「{使用者名稱}的圖片」，但是當我們閉起眼睛來聽這個介面的時候，就會發現這樣好像無法讓無法看到螢幕的人理解這個元件所代表的含義。
因此，從它的用途思考，我們可以得到幾種如：「打開使用者選單」、「帳號資訊」等，可以讓使用者預期點擊結果的選項。
聰明的大家會發現，雖然上面用不同的實際元素的例子拆解說明，但是其實思考的底層邏輯十分相似：
- 如果有功能，就要描述其功能來讓使用者能夠預期點擊結果
- 如果是裝飾性要素，或是介面上已經有同等文字內容，就不一定需要替代文字
這篇文章主要聚焦在產品中常見的互動性要素要如何加上可訪問名稱，相信大家看完這篇文章，也更了解了應該哪些常見元素需要可訪問名稱。
其實還有許多比較特殊例子，例如代表未讀的數字Badge與和數字Badge結合的Icon 按鈕、上線變成綠色的 Status 等、變成了按鈕的Emoji (!) 等，這邊就先不展開說明，如果有興趣了解更多有趣案例，也歡迎留言告訴我們唷！
下一篇文章想要跟大家介紹常見的圖像要素，例如插圖，圖表等。
如果覺得我們的文章有幫助到你，歡迎給我們拍手👏讓我們知道唷！
