手動測試無障礙功能

手動測試基本概念

手動進行無障礙測試會使用鍵盤、視覺及認知測試、工具 和技巧，找出自動化工具無法解決的問題。採用自動化機制 工具並未涵蓋 WCAG 的所有成功標準 vital，您沒有執行自動化無障礙功能測試，然後停止測試！

隨著科技的進步，自動化工具能只涵蓋更多測試，但現在，您也需要在測試通訊協定中加入手動和輔助技術檢查，以涵蓋所有適用的 WCAG 檢查點。

手動無障礙測試的優點：

• 執行速度合理，執行速度快
• 相較於只執行自動測試，找出更高比例的問題
• 只需少量工具和專業知識，就能邁向成功

手動無障礙功能測試的缺點：

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

接著來比較目前可偵測的無障礙元素和詳細資料 與系統偵測不到的差異

手動測試類型

查看您的網站時，有許多手動工具和技巧可以 數位無障礙網頁或應用程式Google Cloud 提供三大重點 手動測試包括鍵盤功能、視覺檢視。 進行一般的內容檢查

本單元將概略介紹這些主題，不過 以下測試並非詳盡列出所有手動測試 可以或應該執行的操作建議您先從 手動無障礙功能檢查清單 ，從可靠的來源取得資料，並自行製定專門的人工測試檢查清單 以配合數位產品和團隊需求

鍵盤檢查

根據估計，大約有 25% 的數位無障礙體驗問題 因為缺乏鍵盤支援正如鍵盤焦點單元所述，這會影響所有類型的使用者，包括僅用鍵盤的視線使用者、低視能/失明螢幕閱讀器使用者，以及語音辨識軟體透過鍵盤存取內容的使用者。

鍵盤測試能夠解答下列問題：

• 網頁或功能是否需要滑鼠才能運作？
• 分頁順序是否合乎邏輯且符合直覺？
• 是否一律顯示鍵盤焦點指標？
• 你是否有卡在不該造成焦點的元素中？
• 你是否能瀏覽應造成焦點的元素後方或周圍？
• 關閉已聚焦的元素時，焦點指標是否回到邏輯位置？

雖然鍵盤功能的影響相當大，但測試程序相當簡單。您只需要放置滑鼠或安裝小型的 JavaScript 套件，然後只用鍵盤測試網站即可。鍵盤測試需要包含以下重要指令。

目視檢測

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

目視檢查會顯示下列資訊：

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

內容檢查

與著重於版面配置、移動和顏色的視覺測試不同，內容檢查會著重在網頁上的文字。你不只需要查看文案本身，更應該重新審視內容脈絡，確保其他人能理解。

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

• 網頁標題、標題和表單標籤是否清楚易懂？
• 替代圖片是否簡潔、準確且實用？
• 能否只用顏色傳達意義或資訊？
• 連結是描述性的嗎？還是使用「閱讀完整內容」或「按一下這裡」等通用文字？
• 網頁上的語言是否有任何變更？
• 是否使用純文字，而且在首次提及時也都要拼音？

有些內容檢查作業可自動進行。舉例來說，您可以編寫 JavaScript Linter，檢查「按這裡」也建議您做出修改不過，這些自訂解決方案通常還是需要人類，才能將副本改為根據情境。

示範：手動測試

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

步驟 1

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

請在偵錯模式中查看，以便繼續 接下來的測試這一點非常重要，因為這會移除 <iframe>， 示範網頁可能會幹擾部分測試工具。進一步瞭解 CodePen 的偵錯模式。

步驟 2

如要開始手動測試程序，請將滑鼠或觸控板往外設定，然後直接使用鍵盤上下瀏覽 DOM。

問題 1：可見焦點指標

系統應該立即顯示第一個鍵盤問題，或者不應出現問題，因為畫面上的焦點指標已移除。在示範中掃描 CSS 時，你應該會在程式碼集看到隱藏的「outline: none」。

  :focus {
    outline: none;
  }

讓我們一起修正吧。

如鍵盤焦點模組所述，您必須移除這行程式碼，讓網路瀏覽器為使用者新增可見的焦點。進一步設計能切合數位產品美學風格的焦點指標。

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

問題 2：焦點順序

修改焦點指標且顯示指標後，請記得按 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， 這個編輯器已套用所有自動化與手動的無障礙修正方法。

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

隨堂測驗

測試你對手動無障礙測試的相關知識