輔助技術測試

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

在數位空間中,AT 可以是:

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

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

螢幕閱讀器測試基礎知識

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

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

瀏覽器相容性

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

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

螢幕閱讀器 作業系統 瀏覽器相容性
透過 Speech 工作存取 (JAWS) Windows Chrome、Firefox、Edge
非視覺桌面存取權 (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 + Option Command + 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>

如果您已正確更新所有內容,視覺上應該不會有任何變化,但螢幕閱讀器的使用體驗會大幅改善。

現在我們已修正內容結構,請再次聆聽螢幕閱讀器在示範中導覽的內容。

請務必向螢幕閱讀器使用者說明連結的用途,以及連結是否會將使用者重新導向至網站或應用程式以外的新位置。

在示範中,我們更新有效圖片的替代文字時,已修正大部分的連結,但仍有幾個關於各種罕見疾病的連結需要提供額外背景資訊,尤其是因為這些連結會重新導向至新位置。

<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

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

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

進行隨堂測驗

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

哪款螢幕閱讀器最適合用於測試無障礙功能?

VoiceOver
JAWS
沒有
Orca

測試輔助技術的目的為何?

測試網站或應用程式中的瑕疵。
如同使用輔助技術的使用者。