本單元著重介紹如何使用輔助技術 (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 做為示範頁面上的主要啟動圖片使用,但螢幕閱讀器找到這個圖片並宣告為「image」不必提供額外資訊即使沒有將 role="img"
屬性明確新增至 SVG 也是如此。
<div class="section-right">
<svg>...</svg>
</div>
為解決這個問題,我們必須先判斷圖片是否資訊豐富或具裝飾性,因此,我們必須根據這項決定加入合適的圖片替代文字 (資訊圖片),或是向螢幕閱讀器使用者隱藏圖片 (裝飾性)。
我們考量了圖片分類的最佳方法,並判定圖片是裝飾性,因此需要新增或修改程式碼,以便隱藏圖片。最簡單的方法是直接在 SVG 圖片中新增 role="presentation"
。這會傳送信號給螢幕閱讀器,讓使用者略過這張圖片,不會列在圖片群組中。
<div class="section-right">
<svg role="presentation">...</svg>
</div>
第 4 期:裝飾項目符號
您可能已經注意到,螢幕閱讀器會讀出 稀有疾病部分雖然我們不是傳統的圖片類型 在「圖片」模組中已討論到,但由於中斷作業,因此仍須修改映像檔 內容流暢度,可能會使螢幕閱讀器使用者分心或感到困惑。
<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。
你現在可以運用所學知識,驗收自己的 Google Cloud 無障礙工具 網站和應用程式
這些無障礙測試的目標,都是盡可能解決相關問題 使用者可能遇到的問題但這不表示您的網站或應用程式 完成後就能輕鬆存取豐功偉業 在整個過程中,確保網站或應用程式的無障礙設計 將這些測試與其他正式發布前測試結合。
隨堂測驗
測試您對自動化無障礙功能測試的瞭解程度
哪一種螢幕閱讀器最適合用於測試無障礙功能?
測試輔助技術的目的為何?