手動測試無障礙功能

手動無障礙功能測試會使用鍵盤、視覺和認知測試、工具和技術,找出自動化工具無法發現的問題。由於自動化工具無法涵蓋 WCAG 中列出的所有成功標準,因此非常重要,請勿執行自動化無障礙測試,然後停止測試!

隨著技術的進步,自動化工具可涵蓋更多測試項目,但目前您仍需在測試規範中加入手動和輔助技術檢查,才能涵蓋所有適用的 WCAG 檢查點。

手動無障礙測試的優點:

  • 執行速度合理,執行速度快
  • 比單獨執行自動化測試時,更能找出更多問題
  • 成功所需的工具和專業知識不多

手動無障礙測試的缺點:

  • 與自動化測試相較,複雜且耗時
  • 可能難以大規模重複
  • 需要更多無障礙程度的專業知識,才能執行測試及解讀結果

讓我們比較一下自動化工具目前可偵測哪些無障礙元素和詳細資料,以及無法偵測的元素和詳細資料。

可自動運作 無法自動化
純色背景上文字的色彩對比 漸層/圖片上文字的色彩對比
圖片有替代文字 圖片替代文字正確無誤且已妥善指派
包含標題、清單和地標 標題、清單和地標已正確標記,且所有元素都已納入考量
使用 ARIA ARIA 已正確使用,且套用至正確的元素
識別可透過鍵盤聚焦的元素 哪些元素缺少鍵盤焦點、焦點順序是否合理,以及焦點指標是否顯示
iFrame 標題偵測 iFrame,焦點順序符合邏輯,且焦點指標可見
有影片元素 影片元素提供適當的替代媒體 (例如字幕和逐字稿)


手動測試類型

在檢視網頁或應用程式的數位無障礙性時,您可以考慮使用許多手動工具和技巧。手動測試的三大重點領域是鍵盤功能、以視覺為主的檢查,以及一般內容檢查。

我們會在本單元概略介紹這些主題,但以下測試的用意不是詳盡列出您可以或應該執行的所有手動測試。建議您從可靠來源取得手動無障礙檢查清單,並根據特定數位產品和團隊需求,自行建立專注於手動測試的檢查清單。

鍵盤檢查

據估計,所有數位無障礙問題中約有 25% 與缺乏鍵盤支援有關。如同我們在「鍵盤焦點」單元所學到的,這會影響所有類型的使用者,包括視力正常的鍵盤專用使用者、視障/全盲螢幕閱讀器使用者,以及使用語音辨識軟體的使用者 (這類軟體採用的技術需要內容可透過鍵盤存取)。

鍵盤測試可回答下列問題:

  • 網頁或功能是否需要滑鼠才能運作?
  • 制表順序是否符合邏輯且直觀易懂?
  • 鍵盤焦點指標是否一律顯示?
  • 您是否會卡在不應捕捉焦點的元素中?
  • 您可以導覽至應捕捉焦點的元素後方或周圍嗎?
  • 關閉已聚焦的元素時,焦點指標是否回到邏輯位置?

雖然鍵盤功能的影響相當大,但測試程序相當簡單。只要放下滑鼠或安裝小型 JavaScript 套件,就能只用鍵盤測試網站。下列指令對於鍵盤測試至關重要。

結果
Tab 鍵 將使用中的元素移至其他元素
Shift + Tab 將使用中的元素後移至另一個使用中的元素
箭頭 循環檢視相關控制項
空格鍵 切換狀態並向下移動頁面
Shift + 空格鍵 將頁面往上移
Enter 鍵 觸發條件專用控制項
Esc 鍵 關閉動態顯示的物件

目視檢查

視覺檢查會著重於網頁的視覺元素,並使用螢幕放大鏡或瀏覽器縮放功能等工具,檢查網站或應用程式的無障礙功能。

視覺檢查可讓您瞭解:

  • 是否有自動化工具無法擷取的色彩對比問題 (例如漸層或圖片上方的文字)?
  • 是否有任何元素看起來像是標題、清單和其他結構元素,但並未編寫這類元素?
  • 網站或應用程式中的導覽連結和表單輸入內容是否一致?
  • 是否有任何閃爍、閃爍或動畫效果超出建議值?
  • 內容是否使用適當間距?可以輸入字母、字詞、行和段落嗎?
  • 你可以使用放大鏡或瀏覽器縮放功能查看所有內容嗎?

內容檢查

與視覺測試著重於版面配置、動態效果和顏色不同,內容檢查會著重於網頁上的文字。除了檢查文字本身,也請檢查上下文,確保內容合乎邏輯。

內容檢查會解答下列問題:

  • 網頁標題、標題和表單標籤是否清楚且具有描述性?
  • 圖片替代方案是否簡潔、準確且實用?
  • 是否只使用顏色來傳達意義或資訊?
  • 連結是描述性的嗎?還是使用「閱讀完整內容」或「按一下這裡」等通用文字?
  • 網頁上的語言是否有任何變更?
  • 是否使用平實的語言,並在首次提及時將所有縮寫字詞都拼寫出來?

部分內容檢查可以部分自動化。舉例來說,您可以編寫 JavaScript 檢查器,檢查「按這裡」並建議您進行變更。不過,這些自訂解決方案通常仍需要人工將文字改為符合情境的內容。

示範:手動測試

到目前為止,我們已對示範網頁執行自動化測試,並找出並修復八種不同類型的問題。我們現在可以進行手動檢查,看看是否能找出更多無障礙問題。

步驟 1

新版 CodePen 示範已套用所有自動無障礙功能更新。

請在偵錯模式中查看,以便繼續進行後續測試。這項操作很重要,因為它會移除圍繞範例網頁的 <iframe>,而這可能會干擾某些測試工具。進一步瞭解 CodePen 的偵錯模式

步驟 2

開始手動測試程序時,請將滑鼠或觸控板放在一旁,只使用鍵盤在 DOM 中上下瀏覽。

問題 1:可見焦點指標

系統應該立即顯示第一個鍵盤問題,或者不應出現問題,因為畫面上的焦點指標已移除。掃描範例中的 CSS 時,您應該會發現程式碼集中加入了令人擔心的「outline: none」屬性。

  :focus {
    outline: none;
  }
讓我們修正問題。

如您在鍵盤焦點單元中所學,您必須移除這行程式碼,讓網路瀏覽器為使用者新增可見焦點。您可以進一步建立符合數位產品美學風格的焦點指標樣式。

:focus {
  outline: 3px dotted #008576;
}

問題 2:焦點順序

修改焦點指標且可以顯示後,請務必按 Tab 鍵瀏覽頁面。您應該會發現,用於訂閱電子報的表單輸入欄位並未獲得焦點。已透過負向 tabindex 從自然焦點順序中移除。

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
讓我們來修正這個問題。

我們希望使用者能運用這個欄位訂閱電子報,因此只要移除負數索引表,或將其設為零,就能讓輸入值變成鍵盤可聚焦的狀態。

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

步驟 3

檢查鍵盤焦點後,就會進入視覺與內容檢查。

您可能會發現,在您透過上下鍵在示範頁面上進行鍵盤測試時,鍵盤會將焦點放在不同醫療狀況段落中的三個隱藏連結。

為了讓網頁符合無障礙設計,連結必須與周圍文字有所區隔,並在滑鼠游標懸停和鍵盤聚焦時,加入非色彩樣式的變更。

讓我們來解決這個問題。

快速解決方法是為段落中的連結加上底線,讓連結更醒目。這麼做可以解決無障礙問題,但可能不符合您希望達到的整體設計美學。

如果您選擇不加下底線,就必須修改顏色,以符合背景和文字的要求。

使用連結對比度檢查工具查看示範時,您會發現連結顏色符合一般大小文字與背景之間的 4.5:1 色彩對比度規定。不過,未加底線的連結也必須符合周圍文字的 3:1 顏色對比度規定。

您可以變更連結顏色,讓顏色與網頁上的其他元素相符。不過,如果您將連結顏色變更為綠色,內文也必須配合調整,以符合連結、背景和周圍文字這三個元素的整體色彩對比需求。

WebAIM 連結文字螢幕截圖:連結至內文的連結未通過 WCAG A 級。
連結和內文相同時,測試會失敗。
WebAIM 的螢幕截圖,顯示當連結顏色為綠色時,所有測試都通過。
如果連結和內文不同,則測試會通過。

問題 4:圖示顏色對比

另一個未解決的色彩對比問題是社群媒體圖示。在「色彩和對比」單元中,您瞭解到必要圖示必須與背景有 3:1 的色彩對比。然而,在示範中,社群媒體圖示的對比度為 1.3:1。

讓我們來修正吧!

為符合 3:1 的色彩對比規定,社群媒體圖示會變更為深灰色。

使用色彩分析器的螢幕截圖,顯示圖示顏色對比度不合格。

問題 5:內容版面配置

查看段落內容的版面配置時,文字會完全對齊。如字體排版模組所述,這會建立「空間的效力」,可能導致部分使用者難以閱讀文字。

p.bullet {
   text-align: justify;
}
讓我們來修正這個問題。

如要重設示範中的文字對齊方式,您可以將程式碼更新為 text-align: left;,也可以從 CSS 中完全移除該行,因為瀏覽器預設對齊方式為左側。請務必測試程式碼,以免其他沿用樣式移除預設的文字對齊方式。

p.bullet {
   text-align: left;
}

步驟 4

Medical Mysteries Club 範例網站的螢幕截圖。
現在所有手動問題都已在示範中解決,如這張圖片所示。

確認並修正所有前述步驟中列出的手動無障礙問題後,網頁應會與螢幕截圖相似。

您在人工檢查時可能會發現更多無障礙問題,而非本單元所述。我們將在下一個單元中探索許多這些問題。

下一步

太棒了!您已完成自動與手動測試模組。您可以查看新版 CodePen,其中已套用所有自動化與手動無障礙功能的修正項目。

現在,請前往最後一個測試單元,重點放在輔助技術測試

隨堂測驗

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

哪些元素必須符合 WCAG 色彩對比標準?

標題
以上皆是
圖示
內文