手動測試基礎知識
手動無障礙測試會使用鍵盤、視覺和認知測試、工具和技術，找出自動化工具無法發現的問題。由於自動化工具無法涵蓋 WCAG 中列出的所有成功標準，因此請務必執行自動化無障礙測試，並持續測試！
隨著技術進步，自動化工具可涵蓋的測試範圍可能會更廣，但目前您仍須在測試通訊協定中加入手動和輔助技術檢查，才能涵蓋所有適用的 WCAG 檢查點。
手動無障礙測試的優點：
- 執行方式相當簡單快速
- 比單獨使用自動化測試更能找出問題
- 不需要太多工具和專業知識就能成功
手動無障礙測試的缺點：
- 比自動化測試更複雜且耗時
- 可能難以大規模重複
- 需要更多無障礙專業知識，才能執行測試及解讀結果
比較自動化工具可偵測到的無障礙元素和詳細資料，以及無法偵測到的項目。
手動測試類型
查看網頁或應用程式的數位無障礙功能時，可以考慮使用許多手動工具和技術。手動測試的三大重點領域是鍵盤功能、以視覺為主的評論，以及一般內容檢查。
我們會在本次課程中概略介紹上述各個主題，但下列測試並非所有手動測試的完整清單，您可或應執行的手動測試不只這些。建議您先從信譽良好的來源取得無障礙功能手動檢查清單，然後根據特定數位產品和團隊需求，自行制定專屬的手動測試檢查清單。
鍵盤檢查
據估計，所有數位無障礙問題中，約有 25% 與缺乏鍵盤支援有關。正如我們在鍵盤焦點模組中所學，這會影響所有類型的使用者，包括僅使用鍵盤的明眼使用者、低視能/視障螢幕閱讀器使用者，以及使用語音辨識軟體的使用者，這類軟體所用的技術也仰賴可透過鍵盤存取的內容。
鍵盤測試可回答下列問題：
- 網頁或功能是否需要滑鼠才能運作？
- 分頁順序是否符合邏輯且直觀易懂？
- 鍵盤焦點指標是否一律會顯示在畫面上？
- 您是否會卡在不應鎖定焦點的元素中？
- 您是否可以導覽至應會鎖定焦點的元素後方或周圍？
- 關閉收到焦點的元素時，焦點指標是否會返回邏輯位置？
鍵盤功能影響重大，但測試程序相當簡單。您只需要放下滑鼠或安裝一小段 JavaScript 程式碼，然後只用鍵盤測試網站即可。下列指令是鍵盤測試的必要指令。
目視檢查
視覺檢查的重點在於網頁的視覺元素，並使用螢幕放大或瀏覽器縮放等工具，檢查網站或應用程式的無障礙功能。
目視檢查可判斷：
- 是否有自動化工具無法偵測到的色彩對比問題，例如漸層或圖片上的文字？
- 是否有任何看起來像標題、清單和其他結構元素的項目，但未編碼為這類元素？
- 網站或應用程式中的導覽連結和表單輸入內容是否一致？
- 是否有任何閃爍、閃光或動畫超出建議範圍？
- 內容是否間隔適當？字母、字詞、行和段落？
- 使用螢幕放大鏡或瀏覽器縮放功能時，是否能看到所有內容？
內容檢查
與著重版面配置、動作和色彩的視覺測試不同，內容檢查著重於網頁上的文字。除了檢查文案本身，也請一併審查內容，確保其他人能理解。
內容檢查可協助解答下列問題：
- 網頁標題、標頭和表單標籤是否清楚且具有描述性？
- 圖片替代文字是否簡潔、準確且實用？
- 是否只用顏色傳達意義或資訊？
- 連結是否具有描述性？還是使用「瞭解詳情」或「按這裡」等籠統的文字？
- 網頁中的語言是否有所變更？
- 是否使用平實的語言？首次提及縮寫時，是否都完整拼出？
部分內容檢查可自動完成。舉例來說，您可以編寫 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>
由於我們希望使用者透過這個欄位訂閱電子報，因此只要移除負的 tabindex 或設為零，即可讓輸入內容再次成為鍵盤焦點。
<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，其中已套用所有自動和手動無障礙修正。
現在請前往最後一個測試模組，瞭解如何測試輔助技術。