用斧頭自動可訪問性檢查

aXe: 自動化輔助功能測試，讓網站更易訪問

您上次設計網站時，花了多少時間和精力來確保殘障人士也能訪問？許多人可能回答是“沒有”。然而，大量互聯網用戶由於難以辨別顏色、閱讀文本、使用鼠標或瀏覽複雜的網站結構而難以訪問網站。

由於檢查和實施輔助功能解決方案需要付出努力，因此輔助功能問題常常被忽視。開發人員不僅必須熟悉底層標準，還必須不斷檢查是否滿足這些標準。我們能否通過自動執行標準檢查來簡化輔助功能網站的開發？

本文將向您展示如何使用 aXe 庫和一些相關的工具來自動檢查和報告網站和應用程序中潛在的輔助功能問題。通過降低此類活動所需的工作量並自動化一些手動工作，我們可以為所有使用我們創建的內容的用戶帶來更好的結果。

aXe 簡介

aXe 是一個自動化輔助功能測試庫，旨在將輔助功能測試引入主流 Web 開發。 axe-core 庫是開源的，設計用於與不同的測試框架、工具和環境一起使用。例如，它可以在功能測試、瀏覽器插件或應用程序的開發版本中運行。它目前支持大約 55 條規則，用於檢查網站的各個輔助功能方面。

為了快速演示該庫的工作原理，讓我們創建一個簡單的組件並對其進行測試。我們不會創建一個完整的頁面，而只是一個標題。

圖片：CodePen 示例截圖

在創建標題時，我們做了一些出色的設計決策：

1. 我們將背景設置為淺灰色，鏈接設置為深灰色，因為這種顏色既優雅又時尚；
2. 我們為搜索按鈕使用了一個很酷的放大鏡圖標；
3. 我們將搜索輸入的 tab 索引設置為 1，以便用戶打開頁面時可以按 Tab 鍵並立即鍵入搜索查詢。

不錯，對吧？讓我們看看從輔助功能的角度來看它是什麼樣的。我們可以從 CDN 添加 aXe 並將所有錯誤記錄到瀏覽器控制台，方法如下：

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

如果您運行該示例並打開控制台，您將看到一個包含六個違規對象的數組，列出了我們遇到的問題。每個對像都描述了我們違反的規則、應責備的 HTML 元素的引用以及有關如何解決問題的幫助信息。

以下是一個違規對象示例，以 JSON 格式顯示：

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

如果您只選擇違規的描述，以下是它的內容：

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="用斧頭自動可訪問性檢查" > 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

事實證明，我們的設計決策並不那麼出色：

1. 我們選擇的兩種灰色陰影對比度不夠，視力障礙者可能難以閱讀
2. 搜索按鈕的放大鏡圖標沒有為使用屏幕閱讀器的人提供任何關於按鈕用途的指示
3. 搜索輸入的 tab 索引打破了使用屏幕閱讀器或鍵盤的人的常規導航流程，並使他們更難以訪問菜單鏈接。

它還指出了我們沒有想到的其他一些事情。總共執行大約 55 次不同的檢查，包括來自不同標準指南和最佳實踐的規則。

要查看錯誤列表，我們必須將腳本注入頁面本身。雖然完全可行，但這並不方便。如果我們可以對任何頁面執行這些檢查而無需自己注入任何內容，那就更好了。最好使用眾所周知的測試運行器。我們可以使用 Selenium WebDriver 和 Mocha 來做到這一點。

使用 Selenium WebDriver 運行 aXe

要使用 Selenium 運行 aXe，我們將使用 axe-webdriverjs 庫。它提供了一個可以在 WebDriver 之上使用的 aXe API。

要設置它，讓我們創建一個單獨的項目並使用 npm init 命令初始化一個 npm 項目。您可以隨意為它要求的所有內容保留默認值。要運行 Selenium，您需要安裝 selenium-webdriver。我們將在 PhantomJS 中執行測試，因此我們也需要安裝它。 Selenium 需要 Node 版本 6.9 或更高版本，因此請確保您已安裝它。

要安裝軟件包，請運行：

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

現在，我們需要安裝 axe-core 和 axe-webdriverjs：

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

現在基礎設施已設置好，讓我們創建一個針對 sitepoint.com 運行測試的腳本（沒什麼個人恩怨，伙計們）。在項目文件夾中創建一個 axe.js 文件並添加以下內容：

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="用斧頭自動可訪問性檢查" > 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

要執行此測試，我們可以運行 node axe.js。我們無法從控制台運行它，因為我們已在本地項目中安裝了 PhantomJS。我們必須將其作為 npm 腳本運行。為此，請打開 package.json 文件並更改默認測試腳本條目：

npm install phantomjs-prebuilt selenium-webdriver --save-dev

現在嘗試運行 npm test。幾秒鐘後，您應該會看到 aXe 發現的違規行為列表。如果您沒有看到任何違規行為，則可能意味著 SitePoint 在閱讀本文後已修復了它們。

這比我們的初始方法更方便，因為我們不需要修改我們正在測試的頁面，並且我們可以使用 CLI 方便地運行它們。但是，這樣做的缺點是我們仍然需要執行單獨的腳本才能運行測試。如果我們可以將其與我們的其餘測試一起運行，那就更好了。讓我們看看如何使用 Mocha 來實現這一點。

使用 Mocha 運行 aXe

Mocha 是最流行的測試運行器之一，因此它似乎是嘗試使用 aXe 的一個不錯的選擇。但是，您應該能夠以類似的方式將 aXe 集成到您最喜歡的測試框架中。讓我們進一步構建我們的 Selenium 示例項目。

我們顯然需要 Mocha 本身和一個斷言庫。 Chai 怎麼樣？使用以下命令安裝所有內容：

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

現在，我們需要將我們編寫的 Selenium 代碼包裝在 Mocha 測試用例中。使用以下代碼創建一個 test/axe.spec.js 文件：

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

測試將通過檢查 results.violations 數組的長度是否等於 0 來執行非常基本的斷言。要運行測試，請將測試腳本更改為調用 Mocha：

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="用斧頭自動可訪問性檢查" > 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

此練習的下一個邏輯步驟是在測試失敗時生成更詳細的錯誤報告。之後，將其與您最喜歡的 CI 環境集成以正確顯示頁面的結果也很有用。我將把這兩件事留給讀者作為練習，並繼續介紹一些有用的附加 aXe 配置選項。

(後續內容，關於高級配置、總結和常見問題的部分，可以根據之前的輸出進行類似的改寫，保持內容一致性，並調整語句和段落結構，使之更流暢自然。)

以上是用斧頭自動可訪問性檢查的詳細內容。更多資訊請關注PHP中文網其他相關文章！