歡迎來到 IT 之家學院，這裡是無障礙實驗室。時隔一月，再次與大家見面，我感到非常愉快。今天，我們來一起探討替代文字的相關問題。

長久以來，視障使用者都是在螢幕閱讀器的輔助下，才得以趕上網際網路大潮，進而享受到網際網路帶來的紅利。這一切都建立在網際網路產品與螢幕閱讀器具有良好相容性的基礎上。體現最明顯的一點便是：產品各功能性元件應確保具有可讀性較高的文字型標籤。如若不然，依託文字合成語音的螢幕閱讀器也只好表示愛莫能助了，只能乾巴巴的讀出 “未加標籤” 來安慰一下你那孤寂的靈魂。

網際網路的早期時代，受限於網路傳輸能力，絕大多數產品都十分體面地通過文字來呈現內容，因此無障礙問題暴露得並不明顯。而伴隨網際網路基礎建設的日趨完善，網路邁進高速發展的快車道，功能堆砌和設計花哨有了先決條件，一場場美化運動掀起一陣陣 “血雨腥風”，在普通使用者看來頂多算是有礙觀瞻，但對於視障使用者而言，那可真就是叫苦不迭了，他們只能苦哈哈地聽著一串又一串的 “未加標籤” 勉強過活。

不過，任何事物的發展，無外乎從低階快速邁入高階，再由高階逐漸趨於完善，無障礙同樣遵循這個原則。在經歷了早期的墾荒時代後，終於迎來了希望的曙光。就在2020 年 12 月 24 日，工業和資訊化部下發了《網際網路應用適老化及無障礙改造專項行動方案》，方案的總體要求強調：針對視障人士，應解決按鈕標籤和圖片資訊不可讀的問題。

其中，按鈕標籤和圖片資訊均可通過替代文字的形式新增，同時也不會影響現有的視覺體驗。因此，為了讓更多的開發者能充分理解這一特性，我們特此撰寫了這篇文章，希望能對大家帶來些許幫助。

什麼是替代文字？

替代文字，一種用於補充或替代非文字內容的文字性說明，可程式設計式地提供或從現有文字中引用，通常用於為非文字控制元件建立標籤，或為非裝飾性內容提供簡要描述，具有十分廣泛的應用場景。

幾乎所有的語言都支援替代文字。例如，HTML 規定 img 標籤必須提供的 alt 屬性，它可在瀏覽器無法顯示影象時輸出文字資訊，更重要的，這些文字資訊有助於螢幕閱讀器使用者清晰直觀地瞭解影象內容。又如為元素提供額外資訊的 title 屬性，當元素獲得滑鼠指標時彈出工具提示，但從某種角度上說，它並不能作為首選的文字替代方案。

事實上，由HTML 5 原生控制元件構建的頁面，其無障礙體驗是非常優秀的。因其支援自定義控制元件而具有豐富的擴充套件性，廣受開發者的認可。W3C 為了使自定義控制元件能獲得與 HTML 5 原生控制元件相同的無障礙體驗，加強自定義控制元件的語義化支援，制定了 WAI-ARIA 技術規範。通過該項技術規範實施頁面開發，能最大限度地保障各類障礙人群的無障礙體驗。

在WAI-ARIA 中，通過 aria-label 與 aria-labelledby 屬性為元素建立標籤，從而達到替代文字的目的。“標籤” 的資訊應當是簡短而明瞭的，它是使用者最先獲取到的控制元件資訊，有著超然的地位；當標籤無法準確傳達控制元件的資訊時，開發者可提供 aria-description 與 aria-describedby 屬性，為使用者提供更為詳細的內容描述。

應用aria-label 創立替代文字

控制元件的標籤不為文字型，或標籤的文字沒有準確傳達控制元件的目的，可使用替代文字提供更為明確的標籤。例如，一個點擊發送 “滑稽” 表情的按鈕，它的標籤由emoji 表情組合而成，就像這樣：

<button>