本單元著重介紹使用輔助技術 (AT) 測試無障礙功能。身心障礙者可以利用 AT 來提高、維護或提升執行工作的能力。
在數位領域，AT 可以是：
- 無/低科技：頭部/嘴巴、手持放大鏡、有大型按鈕的裝置
- 高科技：聲控裝置、眼部追蹤裝置、自動調整式鍵盤/滑鼠
- 硬體：切換按鈕、人體工學鍵盤、自動重新整理點字裝置
- 軟體：文字轉語音程式、即時字幕、螢幕閱讀器
建議您在整體測試工作流程中使用多種 AT。
螢幕閱讀器測試基本概念
在這個單元中，我們會將重點放在最熱門的數位 AT 和螢幕閱讀器之一。螢幕閱讀器是一段軟體，可讀取網站或應用程式的基礎程式碼，然後將這些資訊轉換為語音或點字輸出。
螢幕閱讀器不僅是失明和失明人士的必備工具，還能為低視能、閱讀障礙或認知障礙的使用者帶來助益。
瀏覽器相容性
我們提供多種螢幕閱讀器選項。目前最熱門的螢幕閱讀器是 JAWS、NVDA 和 VoiceOver，以及行動裝置適用的 VoiceOver 和 Talkback。
視您的作業系統 (OS)、慣用的瀏覽器和裝置而定，可能適合使用其中一種螢幕閱讀器。多數螢幕閱讀器皆內建特定的硬體和網路瀏覽器。透過未校準的瀏覽器使用螢幕閱讀器時，您可能會遇到更多「錯誤」或非預期的行為。與下列組合搭配使用時，螢幕閱讀器可以發揮最佳效用。
螢幕閱讀器指令
為電腦或行動裝置上的螢幕閱讀器軟體完成正確設定後，請參閱上表中的螢幕閱讀器說明文件，並執行一些必備的螢幕閱讀器指令，熟悉這項技術的應用。如果您之前使用過螢幕閱讀器，不妨試試新的螢幕閱讀器！
使用螢幕閱讀器進行無障礙功能測試時，您的目標是偵測程式碼中，找出乾擾網站或應用程式的問題，不要模擬螢幕閱讀器使用者的使用體驗。因此，只要您具備一些基本知識、使用一些螢幕閱讀器指令，也許您會需要花費一些心力，甚至多加練習。
如果想進一步瞭解螢幕閱讀器和其他 AT 使用者的使用者體驗，可以與許多機構和個人互動，取得這項寶貴的深入分析資料。提醒您，使用 AT 來對照一組規則來測試程式碼，並詢問使用者的使用體驗，通常會產生不同的結果。兩者都是打造多元包容性產品的重要考量。
電腦版螢幕閱讀器適用的按鍵指令
適用於行動裝置螢幕閱讀器的按鍵指令
螢幕閱讀器測試示範
為了測試我們的示範，我們在搭載 MacOS 的筆電上使用 Safari 並擷取聲音。您可以使用任何螢幕閱讀器執行下列步驟，但部分錯誤發生的方式可能與本單元所描述的錯誤方式有所不同。
步驟 1
前往更新後的 CodePen，其中套用所有自動及手動更新的無障礙功能。
請以偵錯模式檢視，以便繼續執行下一個測試。這個步驟非常重要，因為這麼做會移除示範網頁周圍的 <iframe>，這可能會影響部分測試工具。進一步瞭解 CodePen 的偵錯模式。
步驟 2
啟用您選擇的螢幕閱讀器，然後前往示範頁面。建議先從上往下瀏覽整個頁面，再專注處理特定問題。
針對所有問題，我們透過螢幕閱讀器記錄了每個問題、修正前後的修正作業。我們建議你使用你的螢幕閱讀器進行示範。
問題 1：內容結構
標題和地標是使用者透過螢幕閱讀器瀏覽的主要方式之一。如果沒有這些資訊，螢幕閱讀器使用者就必須閱讀整頁內容，才能瞭解上下文。這項程序相當耗時，且會造成困擾。如果您嘗試在示範中按任一元素瀏覽，會迅速發現這兩個元素不存在。
- 地標範例：
<div class="main">...</div> - 標題範例：
<p class="h1">Join the Club</p>
如果您已正確更新所有內容，應該不會有視覺上的變化，但螢幕閱讀器的使用體驗已大幅改善。
一起解決這個問題。
藉由查看網站，無法觀察部分無法存取的元素。您可能還記得內容結構模組的標題層級和語意 HTML 的重要性。內容可能看起來像標題，但內容實際上是以風格化的 <div> 包裝。
如要修正標題和位置標記的問題，你必須先找出每個應加上標記的元素，然後更新相關的 HTML。請務必一併更新相關的 CSS。
地標範例：<main>...</main>
標題範例：<h1>Join the Club</h1>
如果您已正確更新所有內容，應該不會有視覺上的變化，但螢幕閱讀器的使用體驗已大幅改善。
問題 2：連結內容
請務必為螢幕閱讀器使用者提供連結用途說明，前提是連結會將使用者重新導向至網站或應用程式以外的新位置。
在示範中，我們修正了大部分連結，當更新使用中的圖片替代文字時，我們也修正了大部分的連結問題。在此提供其他連結，說明不同的罕見疾病或許會因為額外的背景資訊而受益，尤其是重新導向到新的位置。
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
Maple syrup urine disease (MSUD)
</a>
為了讓螢幕閱讀器使用者解決這個問題，我們更新了程式碼，在不影響視覺元素的情況下加入更多資訊。或者，為了協助更多人，例如有閱讀與認知障礙的使用者，我們可能會改為加入額外的視覺文字。
我們可能會考慮加入額外的連結資訊。根據我們簡單的環境，僅支援一種語言，因此在這種情況下，不妨使用 ARIA 標籤。你可能會發現 ARIA 標籤會覆寫原始連結文字，因此請務必在更新資料中加入該資訊。
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
Maple syrup urine disease (MSUD)
</a>
問題 3：裝飾圖片
在我們的自動化測試模組中，Lighthouse 無法擷取內嵌的 SVG (也就是示範網頁上的主要啟動圖片)，但螢幕閱讀器會找出此程式碼並宣告為「圖片」，而沒有額外資訊。即使沒有在 SVG 中明確加入 role="img" 屬性也一樣。
<div class="section-right">
<svg>...</svg>
</div>
為了修正這個問題，我們必須先判斷圖片是否豐富或裝飾。因此，我們必須加入合適的圖片替代文字 (說明圖片)，或是對螢幕閱讀器使用者 (裝飾) 隱藏圖片。
我們會衡量最佳分類圖片的優缺點，並判斷圖片屬於裝飾性質，也就是說，我們要新增或修改程式碼來隱藏圖片。其中一個快速方法是直接在 SVG 圖片中加入 role="presentation"。螢幕閱讀器會傳送信號給螢幕閱讀器，藉此略過這張圖片，而不會將其列在圖片群組中。
<div class="section-right">
<svg role="presentation">...</svg>
</div>
問題 4：項目符號裝飾
您可能已註意到，螢幕閱讀器會讀取「罕見疾病」一節底下的 CSS 項目符號圖片。雖然並非我們在圖片模組中討論的傳統圖片類型，仍必須修改圖片，因為圖片會幹擾內容流程，並可能幹擾或混淆螢幕閱讀器使用者。
<p class="bullet">...</p>
與先前討論的裝飾圖片範例類似，您可以在 HTML 中加入 role="presentation"，並使用項目符號類別，在螢幕閱讀器中將其隱藏。同樣地，role="none" 也能正常運作。不過，請不要使用 aria-hidden: true，否則螢幕閱讀器使用者會隱藏所有段落資訊。
<p class="bullet" role="none">...</p>
問題 5：表單欄位
在表單模組中，我們瞭解所有表單欄位也必須有視覺和程式輔助標籤。此標籤必須隨時保持顯示。
在示範教學中，我們缺少電子報訂閱電子郵件欄位中同時缺少視覺和程式輔助標籤。有一個文字預留位置元素，但該元素不會取代標籤，因為該標籤在視覺上不穩定，且與部分螢幕閱讀器完全相容。
<form>
<div class="form-group">
<input type="email" placeholder="Enter your e-mail address" required>
<button type="submit">Subscribe</button>
</div>
</form>
如要修正這個問題，請將文字預留位置替換成類似標籤元素。透過程式輔助方式，這個標籤元素會連結到表單欄位，並透過 JavaScript 加入該標籤，即使在欄位中新增內容，標籤仍會持續顯示。
<form>
<div class="form-group">
<input type="email" required id="youremail" name="youremail" type="text">
<label for="youremail">Enter your e-mail address</label>
<button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
</div>
</form>
總結
恭喜！您已完成這個示範的所有測試。您可以在這個示範的更新版 Codepen 中查看這些變更。
現在，您可以使用所學，檢查您網站和應用程式的無障礙功能。
這項無障礙功能測試的目標，是盡可能解決使用者可能會遇到的可能問題。不過，這不代表使用者完成操作後，即可完整存取網站或應用程式。最成功的做法是在整個網站或應用程式中都加入無障礙設計，並將這些測試與其他正式發布前測試結合。
隨堂測驗
測驗您對於自動化無障礙功能測試的相關知識
最適合用來測試無障礙功能的螢幕閱讀器為何？
使用輔助技術進行測試的目的為何？