本單元著重介紹使用輔助技術 (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 (也就是示範網頁上的主要啟動圖片),但螢幕閱讀器會找出此程式碼並宣告為「圖片」,而沒有額外資訊。即使沒有在 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>
與先前討論的裝飾圖片範例類似,您可以在 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 中查看這些變更。
現在,您可以使用所學,檢查您網站和應用程式的無障礙功能。
這項無障礙功能測試的目標,是盡可能解決使用者可能會遇到的可能問題。不過,這不代表使用者完成操作後,即可完整存取網站或應用程式。最成功的做法是在整個網站或應用程式中都加入無障礙設計,並將這些測試與其他正式發布前測試結合。
隨堂測驗
測驗您對於自動化無障礙功能測試的相關知識
最適合用來測試無障礙功能的螢幕閱讀器為何?
使用輔助技術進行測試的目的為何?