手動測試無障礙功能

手動測試基本概念

手動無障礙功能測試會使用鍵盤、視覺和認知測試、工具和技術，找出自動化工具無法排除的問題。由於自動化工具並未涵蓋 WCAG 中指定的所有成功標準，因此「務必」不要執行自動化無障礙功能測試，然後停止測試！

隨著技術日新月異，自動化工具可以承擔更多的測試次數，但今日必須同時將手動和輔助技術檢查加入測試通訊協定，涵蓋所有適用的 WCAG 檢查點。

手動無障礙測試的優點：

• 簡單明瞭且執行快速
• 與單獨執行自動化測試相比，能發現更多問題所佔的百分比
• 邁向成功所需的小工具和專業知識

手動無障礙測試的缺點：

• 比自動化測試更複雜且耗時
• 可能很難大規模重複
• 需要具備更多無障礙專業知識才能執行測試及解讀結果

現在，讓我們來比較自動化工具目前能偵測到的無障礙元素和詳細資料，以及無法偵測到的無障礙功能元素和詳細資料。

手動測試類型

查看網頁或應用程式時，您可以考慮許多手動工具和技術。手動測試的三大重點領域包括鍵盤功能、視覺焦點審查和一般內容檢查。

我們會在本單元中概略介紹這些主題，但以下測試僅列舉可執行或應該執行的所有手動測試。建議您先從具有公信力的來源開始填寫手動無障礙工具檢查清單，並根據您的特定數位產品和團隊需求，開發專屬的手動測試檢查清單。

鍵盤檢查

根據預估，約有 25% 的數位無障礙功能問題都與缺少鍵盤支援有關。如鍵盤焦點單元所述，這會影響到所有類型的使用者，包括僅用鍵盤的視障使用者、低視能/失明的螢幕閱讀器使用者，以及語音辨識軟體 (需使用鍵盤才能取得內容的技術) 的使用者。

鍵盤測試可解答許多問題，例如：

• 網頁或功能是否需要滑鼠才能運作？
• 標籤順序是否合理且符合直覺？
• 系統一律會顯示鍵盤焦點指標嗎？
• 你可能會卡在不對焦點的元素中嗎？
• 你是否能在應該凸顯焦點的元素後方或周圍瀏覽？
• 關閉接收到焦點的元素時，焦點指標是否回到邏輯位置？

雖然鍵盤功能的影響很大，但測試程序非常簡單。你只需要使用滑鼠附近，或安裝小型 JavaScript 套件，即可使用鍵盤測試網站。下列指令對於鍵盤測試而言至關重要。

視覺檢查

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

視覺檢查可讓您瞭解：

• 是否有自動化工具無法捕捉到的色彩對比問題，例如在漸層或圖片上疊加文字？
• 是否有任何元素看起來像是標題、清單和其他結構元素，但並非經過編碼？
• 整個網站或應用程式的導覽連結和表單輸入設定是否一致？
• 是否有任何閃爍、閃爍或動畫超出推薦內容？
• 內容間距是否恰當？或是字母、字詞、行和段落嗎？
• 你是否使用放大鏡或瀏覽器縮放功能，看到所有內容？

內容檢查

與著重於版面配置、動作和顏色的視覺測試不同，內容檢查則著重於網頁上的字詞。您不僅應查看副本本身，也應仔細確認這些內容是否合理。

「內容檢查」功能可回答以下問題：

• 網頁標題、標題和表單標籤是否清楚易懂？
• 替代圖片是否簡潔、正確且實用？
• 顏色是單純表達含意或資訊的唯一方式嗎？
• 連結是否說明敘述性，或者是否使用「瞭解詳情」或「按這裡」等籠統的文字？)
• 網頁中的語言是否有任何變更？
• 是否使用純文字，且在首次提及時是否有拼寫錯誤？

部分內容檢查可自動化處理，部分需要完成。舉例來說，您可以編寫 JavaScript Linter 來檢查「Click here」(按一下這裡) 並建議您做出變更。不過，這些自訂解決方案通常還是需要人員協助將文案改成內容相關性。

示範：手動測試

到目前為止，我們已在示範網頁上執行自動化測試，找到並修復了八種不同的問題。我們現在已經準備好執行人工檢查，看看是否能找出更多無障礙問題。

步驟 1

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

請以偵錯模式檢視，以便繼續執行下一個測試。這個步驟非常重要，因為這麼做會移除示範網頁周圍的 <iframe>，這可能會影響部分測試工具。進一步瞭解 CodePen 的偵錯模式。

步驟 2

開始手動測試程序，方法是將滑鼠或觸控板翻轉過來，然後使用鍵盤向上或向下瀏覽 DOM。

問題 1：可見焦點指標

您應該會立即看到第一個鍵盤問題，但應該不會出現這個問題，因為螢幕聚焦指標已經移除。在示範中掃描 CSS 時，您應該會發現程式碼集加入了寫的「outline: none」。

  :focus {
    outline: none;
  }

一起解決這個問題。

如鍵盤焦點模組所述，您必須移除這一行程式碼，網路瀏覽器才能為使用者新增明顯焦點。您可以進一步建構焦點指標，設計出符合數位產品外觀的焦點指標。

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

問題 2：焦點順序

修改聚焦指標且顯示後，請務必按 Tab 鍵前往該頁面。接著，您應該注意到用於訂閱電子報的表單輸入欄位不會接收焦點。且已根據負 Tab 索引從自然焦點順序中移除。

<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

檢查鍵盤焦點後，我們會接著說明視覺和內容檢查。

問題 3：連結色彩對比

在透過 Tab 鍵上下瀏覽示範頁面的方式進行鍵盤測試時，您可能會注意到鍵盤聚焦在有關不同健康狀況的段落中的三個視覺隱藏連結。

為了讓網頁可供存取，連結必須與周圍文字有所區別，並在滑鼠遊標懸停和鍵盤焦點時加入非色彩樣式變更。

一起來解決這個問題。

快速的解決方案是為段落中的連結加上底線，讓連結更顯眼。這可以解決無障礙問題，但可能不適合你想達成的整體設計美感。

如果不加上底線，就必須配合背景和文案的需求來修改顏色。

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

其中一種做法是配合網頁上的其他元素變更連結顏色，但如果您將連結顏色變更為綠色，則必須一併修改內文文案，以符合三個元素的整體色彩對比要求：連結、背景和周圍文字。

問題 4：圖示顏色對比

社群媒體圖示上還有另一個缺少色彩對比的問題。在「色彩和對比」模組中，您已瞭解基本圖示需與背景達到 3:1 的色彩對比。但在示範中，社群媒體圖示的對比率為 1.3:1。

一起來解決這個問題。

為了符合 3:1 色彩對比要求，系統會將社群媒體圖示變更為深灰色。

問題 5：內容版面配置

當您查看段落內容的版面配置時，文字會完全左右對齊。如字體排版模組所學，這會形成一個「空間較重」，部分使用者可能會難以閱讀文字。

p.bullet {
   text-align: justify;
}

一起解決這個問題。

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

p.bullet {
   text-align: left;
}

步驟 4

找出並修正前述步驟中提及的所有手動無障礙功能後，您的網頁看起來應該與螢幕截圖類似。

手動檢查可能會發現比本單元所介紹的無障礙問題更多。我們會在下一個單元中說明許多這類問題。

後續步驟

恭喜！您已完成自動化和手動測試模組。您可以查看更新後的 CodePen，瞭解如何套用所有自動及手動修正的無障礙功能。

現在，請前往最後一個測試單元，著重於輔助技術測試。

隨堂測驗

測驗您對人工無障礙測試的相關知識