輔助技術測試

本單元著重介紹如何使用輔助技術 (AT) 進行無障礙測試。身心障礙者可使用 AT 來增加、維持或改善執行任務的能力。

在數位空間中，AT 可以是：

• 無技術或低技術：頭部和口部輔助器、手持放大鏡、按鈕較大的裝置
• 高科技：聲控裝置、眼球追蹤裝置、自適應鍵盤和滑鼠
• 硬體：切換按鈕、符合人體工學的鍵盤、自動更新的點字裝置
• 軟體：文字轉語音程式、即時字幕、螢幕閱讀器

建議您在整體測試工作流程中使用多種 AT 類型。

螢幕閱讀器測試基礎知識

在本單元中，我們將著重介紹最熱門的數位輔助科技之一：螢幕閱讀器。螢幕閱讀器是一種軟體，可讀取網站或應用程式的基礎程式碼，然後將該資訊轉換為語音或點字輸出內容，供使用者使用。

螢幕閱讀器對於失明和失明人士而言至關重要，但也能為低視能、閱讀障礙和認知障礙使用者帶來好處。

瀏覽器相容性

多種螢幕閱讀器選項有很多，最受歡迎的螢幕閱讀器包括電腦版的 JAWS、NVDA 和 VoiceOver，以及行動裝置的 VoiceOver 和 Talkback。

視您的作業系統 (OS)、慣用瀏覽器和使用的裝置而定，最適合使用單一螢幕閱讀器。大部分的螢幕閱讀器都是以特定硬體和網路瀏覽器為開發重點。如果您使用螢幕閱讀器搭配未經校正的瀏覽器，可能會遇到更多「錯誤」或非預期的行為。螢幕閱讀器最適合用於下列組合。

螢幕閱讀器指令

在電腦或行動裝置上完成螢幕閱讀器軟體的正確設定後，請參閱螢幕閱讀器說明文件 (上表中的連結)，並執行一些必要的螢幕閱讀器指令，熟悉這項技術。如果您曾使用過螢幕閱讀器 建議您試試新的螢幕閱讀器

使用螢幕閱讀器進行無障礙測試時，您的目標是偵測程式碼中會干擾網站或應用程式使用體驗的問題，而不是模擬螢幕閱讀器使用者的體驗。因此，只要具備一些基礎知識、掌握幾個螢幕閱讀器指令，並且稍微 (或大量) 練習，就能做很多事。

如果您想進一步瞭解使用螢幕閱讀器和其他輔助科技的使用者體驗，可以與許多機構和個人互動，以獲得寶貴的洞察資料。請注意，使用 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>

讓我們修正問題。

如要修正這個問題，我們必須先判斷圖片是提供資訊還是裝飾。根據這項決定，我們需要為圖片新增適當的替代文字 (資訊圖片)，或是隱藏圖片，不讓螢幕閱讀器使用者看到 (裝飾圖片)。

我們評估了如何最佳分類圖片的優缺點，並判定該圖片屬於裝飾性圖片，因此我們想新增或修改程式碼來隱藏圖片。最簡單的方法是直接將 role="presentation" 新增至 SVG 圖片。這會向螢幕閱讀器傳送信號，讓螢幕閱讀器略過這個圖片，並不會將其列入圖片群組。

<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：表單欄位

在 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。

您現在可以運用所學來檢查自家網站和應用程式的無障礙功能。

所有無障礙測試的目標，都是解決使用者可能遇到的所有問題。不過，這並不表示完成後，您的網站或應用程式就能完全符合無障礙設計。在整個過程中，請以無障礙設計網站或應用程式，並將這些測試納入其他預先發布測試。

進行隨堂測驗

測驗您對自動化無障礙測試的瞭解程度