本單元著重介紹如何使用輔助技術 (AT) 進行無障礙測試。身心障礙者可使用 AT 來增加、維持或改善執行任務的能力。
在數位空間中，AT 可以是：
- 無技術或低技術：頭部和口部輔助器、手持放大鏡、按鈕較大的裝置
- 高科技：聲控裝置、眼球追蹤裝置、自適應鍵盤和滑鼠
- 硬體：切換按鈕、符合人體工學的鍵盤、自動更新的點字裝置
- 軟體：文字轉語音程式、即時字幕、螢幕閱讀器
建議您在整體測試工作流程中使用多種 AT 類型。
螢幕閱讀器測試基礎知識
在本單元中，我們將著重介紹螢幕閱讀器，這是最受歡迎的數位輔助科技之一。螢幕閱讀器是一種軟體，可讀取網站或應用程式的基礎程式碼，然後將該資訊轉換為語音或點字輸出內容，供使用者使用。
螢幕閱讀器對失明和聾盲人士來說至關重要，但也能幫助低視、閱讀障礙和認知障礙人士。
瀏覽器相容性
您可以選擇多種螢幕閱讀器。最受歡迎的螢幕閱讀器包括電腦版的 JAWS、NVDA 和 VoiceOver，以及行動裝置的 VoiceOver 和 Talkback。
視您的作業系統 (OS)、偏好的瀏覽器和使用的裝置而定，螢幕閱讀器可能會是最佳選擇。大部分的螢幕閱讀器都是以特定硬體和網路瀏覽器為設計重點。如果您使用螢幕閱讀器搭配未經校正的瀏覽器，可能會遇到更多「錯誤」或非預期的行為。螢幕閱讀器最適合搭配下列組合使用。
| 螢幕閱讀器 | 作業系統 | 瀏覽器相容性 |
|---|---|---|
| Job Access With Speech (JAWS) | Windows | Chrome、Firefox、Edge |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome 和 Firefox |
| Narrator | Windows | Edge |
| VoiceOver | macOS | Safari |
| Orca | Linux | Firefox |
| TalkBack | Android | Chrome 和 Firefox |
| VoiceOver (行動裝置) | iOS | Safari |
| ChromeVox | ChromeOS | Chrome |
螢幕閱讀器指令
在電腦或行動裝置上完成螢幕閱讀器軟體的正確設定後，請參閱螢幕閱讀器說明文件 (上表中的連結)，並執行一些必要的螢幕閱讀器指令，熟悉這項技術。如果您曾使用螢幕閱讀器，不妨試試其他款式！
使用螢幕閱讀器進行無障礙測試時，您的目標是偵測程式碼中會干擾網站或應用程式使用體驗的問題，而不是模擬螢幕閱讀器使用者的體驗。因此，只要具備一些基礎知識、掌握幾個螢幕閱讀器指令，並稍微 (或大量) 練習，就能做很多事。
如果您想進一步瞭解使用螢幕閱讀器和其他輔助科技的使用者體驗，可以與許多機構和個人互動，以獲得寶貴的洞察資料。請注意，使用 AT 根據一組規則測試程式碼，並詢問使用者他們的體驗，通常會產生不同的結果。這兩項都是打造完全包容的產品的重要環節。
電腦螢幕閱讀器的按鍵指令
| 元素 | NVDA (Windows) | VoiceOver (macOS) |
|---|---|---|
| 一般指令鍵 | 插入 | Control+Option |
| 停止播放音訊 | 控管 | 控管 |
| 閱讀下一/上一則 | ↓ 或 ↑ 鍵 | Control + Option + → 或 ← 鍵 |
| 開始朗讀 | 插入↓ | Control + Option + A 鍵 |
| 元素清單/Rotor | NVDA + F7 鍵 | Control + Option + U 鍵 |
| 地標 | D 鍵 | Control + Option + U 鍵 |
| 標題 | H | Control+Option+Command+H |
| 連結 | K | Control + Option + Command + L 鍵 |
| 表單控制項 | 週五 | Control+Option+Command+J |
| 表格 | 望遠 | Control+OptionCommand+T |
| 資料表內 | 插入 Alt + ↓ ↑ ← → | Control+Option+↓ ↑ ← → |
行動裝置螢幕閱讀器的按鍵指令
| 元素 | TalkBack (Android) | VoiceOver (iOS) |
|---|---|---|
| 探索 | 用單指拖曳螢幕畫面 | 以單指拖曳螢幕畫面 |
| 選取或啟用 | 輕觸兩下 | 輕觸兩下 |
| 向上或向下移動 | 用雙指向上或向下滑動 | 用三指向上或向下滑動 |
| 變更頁面 | 用雙指向左或向右滑動 | 用三指向左或向右滑動 |
| 下一首/上一首 | 用一根手指向左或向右滑動 | 用一根手指向左或向右滑動 |
螢幕閱讀器測試示範
為了測試我們的示範，我們使用搭載 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>
就像先前討論的裝飾圖片範例一樣，您可以使用符號類別將 role="presentation" 新增至 HTML，以便在螢幕閱讀器中隱藏該圖片。同樣地，role="none" 也適用。請務必不要使用 aria-hidden: true，否則您會向螢幕閱讀器使用者隱藏所有段落資訊。
<p class="bullet" role="none">...</p>
問題 5：表單欄位
在 Forms 模組中，我們瞭解到所有表單欄位都必須有視覺和程式輔助標籤。這個標籤必須隨時顯示。
在示範中，我們的電子報訂閱電子郵件欄位缺少視覺和程式輔助標籤。雖然有文字預留位置元素，但這並不會取代標籤，因為它不會持續顯示，且無法與所有螢幕閱讀器完全相容。
<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 中查看此示範的所有變更。
您現在可以運用所學知識，檢查自家網站和應用程式的無障礙性。
所有無障礙測試的目標，都是解決使用者可能遇到的所有問題。不過，這並不表示完成後，您的網站或應用程式就能完全符合無障礙標準。在整個流程中，請以無障礙設計網站或應用程式，並將這些測試納入其他預先發布測試。
進行隨堂測驗
測驗您對自動化無障礙程度測試的瞭解程度。
哪款螢幕閱讀器最適合用於測試無障礙功能？
使用輔助技術進行測試的目的為何？