輔助技術測試

本單元著重於使用輔助技術 (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" 屬性加入 SVG，也是如此。

<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 中查看所有這些變更。

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

所有無障礙測試的目標，都是為瞭解決使用者可能遇到的問題。不過，這並不代表完成後，您的網站或應用程式就完全符合無障礙標準。在設計網站或應用程式時，請全程考量無障礙功能，並將這些測試納入其他發布前測試，這樣最能確保無障礙功能正常運作。