自動化無障礙功能測試

到目前為止，您已瞭解個人、企業 數位無障礙的法律層面，以及數位無障礙的基本概念 確保一致性。您已探討有關多元包容設計和 包括何時該使用 ARIA 與 HTML、如何測量色彩對比 就連其他主題都非常需要 JavaScript

在其餘單元中，我們將設備從設計和建構轉為測試 提升無障礙功能我們會採用三步驟測試程序，包括 自動化、手動和輔助技術測試工具及技術。我們會 在整個測試模組中使用同一個示範內容，推動網頁從 無法存取

每項測試 (自動化、手動與輔助技術) 都是達成以下目標的關鍵： 最容易取得的產品

我們的測試仰賴《無障礙網頁內容規範》(WCAG) 2.1 符合等級 A 和 AA 標準。請注意您的產業別、產品類型、當地法律和國家/地區法律 或整體無障礙目標，視同 以及需要滿足的程度如果您的 專案時，建議使用最新版 WCAG。 請參閱「如何評估數位無障礙程度？」 ，瞭解無障礙稽核項目、一致性類型/層級、 無障礙網頁規範，以及 POUR。

如先前所知，無障礙規範並非全貌 都是支持身心障礙者但這是個很好的起點 提供可做為測試用的指標建議您多加利用 針對無障礙功能合規性測試以外的額外動作，例如 執行可用性測試，邀請身心障礙者 或向個人或公司諮詢 數位無障礙專業知識，協助你打造更多元包容的產品。

自動化測試基本資訊

自動化無障礙功能測試會使用軟體掃描數位產品， 違反預先定義的無障礙標準。

自動化無障礙測試的優點：

• 您可以輕鬆在產品生命週期的不同階段重複執行測試
• 執行幾個步驟即可快速執行結果，並迅速取得結果
• 如要進行測試或解讀結果，不太需要具備無障礙程度的無障礙功能

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

• 自動化工具無法找出產品中所有的無障礙功能錯誤
• 回報誤判 (檢舉並非真正的 WCAG 違規行為)
• 不同的產品類型和角色可能需要使用多項工具

要檢查網站或應用程式，自動化測試是很好的第一步 無障礙功能，但並非所有檢查都能自動。稍後我們會詳細說明 瞭解如何檢查無法自動化處理的元素 手動進行無障礙功能測試模組。

自動化工具類型

我們是第一項線上自動無障礙測試工具開發的 1996 年，由應用特殊技術中心 (CAST) 進行，呼叫 「Bobby Report」。今天， 超過 100 種自動測試工具 出發！

自動化工具實作與無障礙瀏覽器擴充功能不同， 程式碼 Linter、桌面與行動應用程式、線上資訊主頁，甚至是 開放原始碼 API 建構自己的自動化工具。

你決定使用的自動化工具取決於許多因素，包括：

• 您測試的是哪些符合標準和等級？這可能會 包括 WCAG 2.1、WCAG 2.0、U.S.第 508 節，或經過修改的無障礙規則清單。
• 您要測試哪一種數位產品？可以是網站、網站 應用程式、原生行動應用程式、PDF、資訊站或其他產品
• 你在軟體開發生命週期的哪個階段測試產品？
• 設定及使用這項工具需要多少時間？如果是個人， 團隊或公司？
• 誰要執行測試：設計人員、開發人員、品質確保等？
• 你希望多久檢查一次無障礙功能？應提供的詳細資料 是否包含在報表中？問題應直接連結到售票服務 該怎麼辦？
• 哪些工具最適合您的環境？適合你的團隊嗎？

此外還有許多其他需要考量的因素。查看 WAI 的文章 「選取 Web Accessibility 評估工具」 。

示範：自動化測試

為了提供自動化無障礙功能測試示範，我們將使用 Chrome 的 Lighthouse。 Lighthouse 是開放原始碼的自動化工具，旨在改善 透過效能、搜尋引擎最佳化 (SEO) 和 更方便存取

我們的示範是為虛擬機構 e Medical Mysteries 建立的網站 來吧，我們故意讓示範使用者無法存取這個網站。部分 只有您看得到，而部分 (但並非所有) 都會被偵測到 以及自動化測試

步驟 1

使用 Chrome 瀏覽器安裝 Lighthouse 擴充功能。

整合 Lighthouse 的方法有很多種 整合測試工作流程我們會使用 Chrome 擴充功能進行示範。

步驟 2

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

步驟 3

開啟 Chrome 開發人員工具，然後 前往「Lighthouse」分頁。取消勾選以下所有類別選項： 「無障礙設定」。保留預設模式，並選擇你要使用的裝置類型 並進行測試

步驟 4

按一下「分析網頁載入」按鈕，給 Lighthouse 執行測試所需的時間。

測試完成後，Lighthouse 會顯示分數 您要測試的產品可以存取 Lighthouse 分數 計算方式是將問題數量、問題類型，以及對 以及系統偵測到的問題

不只是分數，Lighthouse 報告還提供了內容的詳細資訊 回報偵測到的問題，並提供資源連結，讓您進一步瞭解修正方式 具體做法是指示 Kubernetes 建立並維護 一或多個代表這些 Pod 的物件本報告也包含通過或不適用的測試，以及 列出要手動檢查的其他項目清單

步驟 5

現在，我們來看看各項自動化無障礙功能問題的示例 並且修正相關樣式和標記

問題 1：ARIA 角色

第一個問題說明：「含有 ARIA [角色] 的元素，需要子項 包含特定 [role] 缺少部分或所有必要子項。 部分 ARIA 父項角色必須包含特定的子項角色，才能執行 的無障礙功能。」 進一步瞭解 ARIA 角色規則。

在示範中，電子報訂閱按鈕故障：

<button role="list" type="submit" tabindex="1">Subscribe</button>

讓我們一起修正吧。

「訂閱」輸入欄位旁的按鈕含有不正確的 ARIA 角色 。在這種情況下，您可以完全移除角色。

<button type="submit" tabindex="1">Subscribe</button>

問題 2：已隱藏 ARIA

"[aria-hidden="true"] 元素包含可聚焦子系。可聚焦 [aria-hidden="true"] 元素中的子系禁止這些互動式元素 元素 讀者。進一步瞭解 aria-hidden 規則。

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

讓我們一起修正吧。

輸入欄位套用了 aria-hidden="true" 屬性。正在新增 該屬性會隱藏元素 (以及其巢狀結構中的所有內容) 輔助技術

<input type="email" placeholder="Enter your e-mail address" tabindex="-1" required>

在此情況下，您應該從輸入值中移除這個屬性，以便使用者 利用輔助技術存取資訊，並在表單欄位中輸入資訊。

問題 3：按鈕名稱

按鈕沒有無障礙名稱。如果按鈕沒有 無障礙名稱, 螢幕閱讀器只會讀出「按鈕」無法使用 仰賴螢幕閱讀器的使用者 進一步瞭解按鈕名稱規則。

<button role="list" type="submit" tabindex="1">Subscribe</button>

讓我們一起修正吧。

當你從以下位置的按鈕元素中移除不正確的 ARIA 角色： 問題 1，旁邊顯示「訂閱」字樣變成無障礙工具按鈕 名稱。這項功能內建於語意 HTML 按鈕元素中。有 是其他模式選項，適用於較複雜的情況。

<button type="submit" tabindex="1">Subscribe</button>

問題 4：圖片替代屬性

圖片元素缺少「[alt]」屬性。說明元素應著重於 用於簡短描述的替代文字裝飾元素可以使用 空白的 alt 屬性進一步瞭解圖片替代文字 規則。

<a href="index.html">
  <img src="https://upload.wikimedia.org/wikipedia/commons/….png">
</a>

讓我們一起修正吧。

由於標誌圖片也是連結，因此您應該 圖片模組稱為 圖片，並需要有關圖片用途的替代文字資訊。 一般來說，網頁上的第一張圖片是標誌，因此您可以合理假設 您的 AT 使用者會知道此資訊，而您可能會決定不新增此額外的 將背景資訊提供給圖片說明

<a href="index.html">
  <img src="https://upload.wikimedia.org/wikipedia/commons/….png"
    alt="Go to the home page.">
</a>

問題 5：連結文字

連結沒有可辨別的名稱。連結文字 (圖片的替代文字) 當以連結形式使用) 時)，您可辨識獨特、獨特且可聚焦的因素，進而改善 方便螢幕閱讀器使用者操作 進一步瞭解連結文字規則。

<a href="#!"><svg><path>...</path></svg></a>

讓我們一起修正吧。

網頁上的所有可採取行動圖片都必須包括 連結即可將使用者帶往解決方法之一是新增 如同圖片中對標誌圖片宣傳的目標 範例。對於使用 <img> 標記的圖片來說，這項功能非常實用，但 <svg> 標籤無法使用此方法。

針對使用 <svg> 標記的社群媒體圖示，您可以使用 不同的替代說明模式 指定 SVG，請在 <a> 和 <svg> 代碼之間加入相關資訊， 向使用者顯示隱藏的圖表、新增支援的 ARIA，或其他選項。視情況而定 建議您優先選擇其中一種方法 另一個例子。我們使用最簡單的模式選項，並提供最實用的協助 技術涵蓋範圍，也就是將 role="img" 加入 <svg> 標記，以及 包括 <title> 元素

<a href="#!">
  <svg role="img">
    <title>Connect on our Twitter page.</title>
    <path>...</path>
  </svg>
</a>

問題 6：色彩對比

背景和前景顏色沒有足夠的對比度。 低對比度的文字對許多讀者來說難以閱讀或無法閱讀。 進一步瞭解色彩對比規則。

其中有兩個示例。

，瞭解如何調查及移除這項存取權。

讓我們一起解決這個問題！

系統在網頁上偵測到許多色彩對比問題。正如您所學 色彩與對比模組 一般大小的文字 (小於 18pt / 24 像素) 對色彩對比的要求 4.5:1，大尺寸文字 (至少 18pt / 24px 或 14pt / 18.5px) 基本圖示必須符合 3:1 規定。

網頁標題的藍綠色文字必須符合 3:1 的色彩對比 因為這個大型文字大小為 24px不過，藍綠色按鈕則是 視為一般大小的文字 (16px 粗體)，因此必須符合 4.5:1 的顏色 對比度需求

在這個例子中，我們可以找出一種夠暗的藍綠色，以符合 4.5:1 的情況；或者 我們可以將按鈕文字大小增加為 18.5px 粗體 藍綠色的數值任一方法都能符合設計原則 美感

所有白色背景的灰色文字也無法用於色彩對比，除了 。這段文字必須調暗，才能符合 以及 4.5:1 色彩對比要求

，瞭解如何調查及移除這項存取權。

問題 #7 - 清單結構

清單項目 (<li>) 未包含在 <ul> 或 <ol> 父項元素中。 清單項目 (<li>) 必須包含在上層螢幕閱讀器中 要正確發布 <ul> 或 <ol>。

進一步瞭解名單規則。

<div class="ul">
  <li><a href="#">About</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Donate</a></li>
  <li><a href="#">Q&A</a></li>
  <li><a href="#">Subscribe</a></li>
</div>

讓我們一起修正吧。

在這個示範中，我們使用 CSS 類別來模擬未排序清單，而非 刪除 <ul> 標記。不當撰寫此程式碼時，我們移除了固有的 此標記內建了語意 HTML 功能。將類別替換為實際值 <ul> 標記並修改相關的 CSS 資訊，我們解決了這個無障礙功能的問題。

<ul>
  <li><a href="#">About</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Donate</a></li>
  <li><a href="#">Q&A</a></li>
  <li><a href="#">Subscribe</a></li>
</ul>

問題 #8 - Tabindex

部分元素的 [tabindex] 值大於 0。大於 0 的值 隱含明確的導覽順序。雖然技術上可行，但這通常 為仰賴輔助技術的使用者帶來困擾。 進一步瞭解 Tabindex 規則。

<button type="submit" tabindex="1">Subscribe</button>

讓我們一起修正吧。

除非有特定原因導致網路上的自然分頁排擠 網頁，因此 Tabindex 屬性不必含有正整數。目的地： 保持自然的 Tab 鍵順序，我們可以將 Tabindex 變更為 0 或 徹底移除這項屬性

<button type="submit">Subscribe</button>

步驟 6

如果您已修正所有自動化無障礙功能問題，請改開啟新的 偵錯模式頁面。再次執行 Lighthouse 無障礙功能稽核。你的分數 應該會比第一次執行時好得多。

所有自動無障礙功能更新 CodePen。

下一步

太棒了！您達成了許多目標，但我們還沒結束！接下來 我們接下來會進行手動檢查 手動進行無障礙功能測試模組。

隨堂測驗

測試您對自動化無障礙功能測試的瞭解程度