本單元著重介紹如何使用輔助技術 (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 做為示範頁面上的主要啟動圖片使用，但螢幕閱讀器找到這個圖片並宣告為「image」不必提供額外資訊即使沒有將 role="img" 屬性明確新增至 SVG 也是如此。
<div class="section-right">
<svg>...</svg>
</div>
為解決這個問題，我們必須先判斷圖片是否資訊豐富或具裝飾性，因此，我們必須根據這項決定加入合適的圖片替代文字 (資訊圖片)，或是向螢幕閱讀器使用者隱藏圖片 (裝飾性)。
我們考量了圖片分類的最佳方法，並判定圖片是裝飾性，因此需要新增或修改程式碼，以便隱藏圖片。最簡單的方法是直接在 SVG 圖片中新增 role="presentation"。這會傳送信號給螢幕閱讀器，讓使用者略過這張圖片，不會列在圖片群組中。
<div class="section-right">
<svg role="presentation">...</svg>
</div>
第 4 期：裝飾項目符號
您可能已經注意到，螢幕閱讀器會讀出 稀有疾病部分雖然我們不是傳統的圖片類型 在「圖片」模組中已討論到，但由於中斷作業，因此仍須修改映像檔 內容流暢度，可能會使螢幕閱讀器使用者分心或感到困惑。
<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。
你現在可以運用所學知識，驗收自己的 Google Cloud 無障礙工具 網站和應用程式
這些無障礙測試的目標，都是盡可能解決相關問題 使用者可能遇到的問題但這不表示您的網站或應用程式 完成後就能輕鬆存取豐功偉業 在整個過程中，確保網站或應用程式的無障礙設計 將這些測試與其他正式發布前測試結合。
隨堂測驗
測試您對自動化無障礙功能測試的瞭解程度
哪一種螢幕閱讀器最適合用於測試無障礙功能？
測試輔助技術的目的為何？