Accessibility開發與實踐系列
讓視覺元素富含文字訊息：可訪問名稱與描述
可訪問名稱與描述是什麼？有哪些不同的類型？如何使用？
在這篇文章中，我們將介紹：
- 可訪問名稱與描述（Accessible name / Accessible description）是什麼？它們之間的差異是什麼？
- 輔助科技、瀏覽器與可訪問名稱的關聯是什麼？
- HTML 中不同的可訪問名稱產生方式有哪些？
相信有了這些概念，你會更容易察覺頁面上可能潛在的 accessibility 問題，在製作頁面的早期就能即時發現並修正這些看似微小卻對輔助科技使用者影響甚鉅的點。
在頁面上我們常會看到使用各種視覺圖標來呈現資訊內容，像是看到「放大鏡」圖標就會知道這是一個查詢功能、看到「齒輪」就代表著設定。
雖然善用圖標可以讓內容看起來更豐富，但如果沒有給予它文字訊息的話，對於螢幕閱讀器使用者來說就只是一個個不知何用的物件。
由於螢幕閱讀器主要的任務是將文字轉成語音/點字來給使用者接收資訊，畫面上的各種視覺提示或圖標都是無法直接轉換成語音或點字的內容，因此這類內容都應該有適當的文字訊息來傳遞這個元素上的視覺資訊，例如前面提到的「放大鏡」或「齒輪」圖標就應該在這些物件上加上說明用途或代表含意的文字訊息，如此才能讓螢幕閱讀器順利轉換成語音/點字輸出。
從下例的Codepen中可以發現螢幕閱讀器在讀這一排的物件時都只有讀出「按鈕」，這就像你走進了一台電梯，但樓層按鍵卻斑駁掉漆完全看不到數字，搭乘者只能像玩猜猜樂般的嘗試著不同按鍵，讓人無所適從。
你也可以觀看影片了解螢幕閱讀器使用者實際操作圖標無可訪問名稱的Codepen聽到的內容。
此外，不只圖標需要加上文字訊息，像是編輯區、核取方塊、選擇鈕等等這類表單元件都是應該要有文字訊息來說明這個物件的用途。
我們接著就來看看螢幕閱讀器中所見的文字訊息的相關知識與各種添加文字訊息的方法吧！
元素的可訪問名稱與描述
可訪問名稱（Accessible name）是物件的文字標籤，提供有關物件用途的訊息，頁面上的物件大多數應該要有這個值，例如上文中的放大鏡圖標按鈕應該標示「查詢」。
可訪問描述（Accessible description）是一個簡短的解釋文字，進一步說明物件的補充資訊。如果可訪問名稱足夠，不一定要提供可訪問描述，但它可以幫助使用者更好地理解物件的用途。例如「查詢」圖標按鈕的描述可能是：「點擊進行全站查詢」或「點擊進行書籍查詢」。
Web 瀏覽器世界中的可訪問名稱與描述從何而來？
那麼在 Web 瀏覽器中可訪問名稱是從何而來的呢？首先，瀏覽器會依據 HTML 產生出 DOM 結構，接著再依據 DOM 建構出對應的 accessibility tree 的，而這棵 accessibility tree 的每個節點就有可訪問名稱與描述的欄位供輔助科技讀取，因此追根究底來說可訪問名稱與描述的值是從 HTML 而來的。
在大多數情況下，我們只要透過正確的使用相對應的 HTML 標記語法便能提供出想要的可訪問名稱，像是圖片<img> 的 alt 屬性、表單控件的<label> <label for> 等等方式，而當原生的 HTML 標記無法滿足時，也可以透過 aria-label, aria-labelledby 這組 ARIA 屬性來設定物件的可訪問名稱。而可訪問描述則是需要使用原生 HTML 的 title 屬性或 ARIA 的 aria-describedby 屬性來加以補充。
這邊也附上圖標有可訪問名稱與描述，螢幕閱讀器使用者實際操作影片，大家透過自己查看Codepen或是影諞，可以發現將上方缺少可訪問名稱與描述的例子中的物件修正後，螢幕閱讀器就不會只讀「按鈕」、「按鈕」、「按鈕」了！
螢幕閱讀器中可訪問名稱與描述
在螢幕閱讀器取得物件的資訊中，可訪問名稱與描述是提供物件文字訊息的兩個重要屬性。當焦點移到新的物件上時，螢幕閱讀器變會讀出可訪問名稱與可訪問描述的值，因此物件的可訪問名稱與可訪問描述不能同時是空值，否則螢幕閱讀器使用者將難以得知這個物件的用途。
從螢幕閱讀器的操作與呈現來看，可訪問名稱的值是可以被逐字聽讀、選取複製的內容，如同物件的可見文字標籤般，而可訪問描述則無法，它像訊息跑馬燈一般報讀完後即刻消失，無法逐字聽讀，因此在使用者體驗上更接近工具提示框( Tooltips )的效果。
在 iOS 中，就有許多地方都有加上可訪問描述來告知使用者該如何操作這個物件，例如當焦點停在編輯區但尚未進入編輯模式時，Voiceover 除了讀出「請輸入訊息」 的可訪問名稱外還會讀出「點兩下來編輯」、「使用轉輪來取用拼錯的單字」等等的可訪問描述。像這樣加入可訪問描述對於尚未熟悉如何操作的新手來說，一開始使用時不用很刻意的去記憶不同類型的物件該如何操作，就十分地友善。
從 iOS 的舉例中可知，可訪問名稱與描述這樣的概念不僅僅存在於 web 瀏覽器中，也存在於應用程式。更精確的說，瀏灠器本質上也是一種應用程式，最終瀏覽器仍是需要透過作業系統所提供的無障礙 API 來曝露這些無障礙資訊給輔助科技的。
HTML 中不同的可訪問名稱產生方式
以下我們來看看幾種 HTML 原生標記與其對應產生的可訪問名稱：
標籤內文字
以標籤內的文字來作為物件的可訪問名稱，適用的標籤有連結<a> 、按鈕 <button> 。這是最普遍產生可訪問名稱的方式。
<a href="XXX">a11y 新手村</a>
標籤的屬性
以標籤的屬性值來作為物件的可訪問名稱，例如圖片<img> 就是依據它的 alt 值作為該物件的可訪問名稱。
<img src="XXX" alt="a11y 新手村"/>
關聯其他元素的可訪問名稱
以關聯其他元素的可訪問名稱來作為物件的可訪問名稱，例如表單元件 <input> 需要使用到<label>來將 <label>內的文字與 <input> 做關聯，關聯後<input>的可訪問名稱就會是 <label>的可訪問名稱。
<label><input type="checkbox"/>a11y新手村</label><input id="a11y-check" type="checkbox"/><label for="a11y-check">a11y新手村</label>
使用<label>時，有兩種做法，一種是將 <input>直接包在<label>內，另一種則是在<label> 上加入 for 屬性來指名關聯的<input>
上述三個是常見的原生 HTML 標籤與其會產生的可訪問名稱的情境。其中第一種情境是瀏覽器會自動將按鈕<button>、連結 <a>等等類型的標籤所包括的文字作為可訪問名稱，我們可以不必特別處理，但第二類圖片與第三類表單控件的情境是需要製作時人為加入對應設定才會產生可訪問名稱的，所以如果你在未來遇到圖片 <img>、表單元件 <imput>這兩種元素時，務必要正確地使用 alt 或 label for 讓你的元件有個恰當的可訪問名稱喔！
你可以從這裡觀看螢幕閱讀器使用者操作「不同的可訪問名稱產生方式」Codepen的影片
我們也整理了一個比較圖表，方便你更好理解和總結上文提到的內容：
使用 ARIA
若是第一種情況(以標籤所包括的文字來產生可訪問名稱)但卻遇到標籤內沒有文字只有圖標的情況時，我們就會需要使用 aria-label, aria-labelledby 這組屬性來直接給予物件可訪問名稱了。
這組 ARIA 屬性是 accessibility 開發中基礎且通用的一組 ARIA 屬性，它們可以用在包括按鈕 <button>、連結 <a>、區塊 <div>、表單控件<input> 、圖片 <img> 等等大多數的 HTML 標籤上，讓我們可賦予物件文字訊息。
而 aria-label 與 aria-labelledby 兩者的差別在於 aria-label 是直接提供文字去修改物件的可訪問名稱，而 aria-labelledby 則是提供一組頁面上其他物件的 id 作關聯，讓物件的可訪問名稱修改為關聯物件的可訪問名稱。
螢幕閱讀器使用者操作「aria-label & aria-labelledby 介紹範例」Codepen影片
範例中的 「Read more」 連結加上了 aria-labelledby 屬性並設為標題的 id (#headline-1/#headline-2)，螢幕閱讀器會報讀 “Read more…Storms hit east coast”/”Read more… West coast was safe and sound”，提供附加訊息，讓螢幕閱讀器使用者知道 「Read more」 連結是針對哪一個內容的「Read more」。
在使用上如果頁面已有適當的其他物件可供對應關聯時，推薦先使用 aria-labelledby 做物件與物件間的關聯來產生可訪問名稱，這是因為在做 accessibility 時，我們會希望能進量提供等質的資訊給輔助科技，如果使用者從視覺上可以看出這個物件與文字是有關聯的，我們就應該盡可能地在語意上做出等質的效果。
讀完文章後，希望你未來在製作圖片、表單、按鈕圖示時，知道如何適當地加上文字訊息，讓螢幕閱讀器使用者在操作你的介面時不再需要玩猜猜樂吧！
本文作者：Woody
熱愛學習與開發程式的軟體工程師，對知識充滿好奇心，喜歡與人的互相分享。歡迎來一起協作開發各種 accessibility 專案。
