aXe: 自動化輔助功能測試，讓網(wǎng)站更易訪問

您上次設(shè)計網(wǎng)站時，花了多少時間和精力來確保殘障人士也能訪問？許多人可能回答是“沒有”。然而，大量互聯(lián)網(wǎng)用戶由於難以辨別顏色、閱讀文本、使用鼠標(biāo)或瀏覽複雜的網(wǎng)站結(jié)構(gòu)而難以訪問網(wǎng)站。

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

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

aXe 簡介

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

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

圖片：CodePen 示例截圖

在創(chuàng)建標(biāo)題時，我們做了一些出色的設(shè)計決策：

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

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

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

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

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

[
  {
    "id": "button-name",
    // ... (其余 JSON 數(shù)據(jù))
  }
]

如果您只選擇違規(guī)的描述，以下是它的內(nèi)容：

<code>確保按鈕具有清晰的文本
確保前景和背景顏色之間的對比度滿足 WCAG 2 AA 對比度比率閾值
確保每個 HTML 文檔都有一個 lang 屬性
確保 <img  alt="用斧頭自動可訪問性檢查" ></img> 元素具有替代文本或無角色或演示角色
確保每個表單元素都有一個標(biāo)簽
確保 tabindex 屬性值不大于 0</code>

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

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

它還指出了我們沒有想到的其他一些事情?？偣矆?zhí)行大約 55 次不同的檢查，包括來自不同標(biāo)準(zhǔn)指南和最佳實踐的規(guī)則。

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

使用 Selenium WebDriver 運行 aXe

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

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

要安裝軟件包，請運行：

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

現(xiàn)在，我們需要安裝 axe-core 和 axe-webdriverjs：

[
  {
    "id": "button-name",
    // ... (其余 JSON 數(shù)據(jù))
  }
]

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

<code>確保按鈕具有清晰的文本
確保前景和背景顏色之間的對比度滿足 WCAG 2 AA 對比度比率閾值
確保每個 HTML 文檔都有一個 lang 屬性
確保 <img  alt="用斧頭自動可訪問性檢查" ></img> 元素具有替代文本或無角色或演示角色
確保每個表單元素都有一個標(biāo)簽
確保 tabindex 屬性值不大于 0</code>

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

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

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

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

使用 Mocha 運行 aXe

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

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

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

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

[
  {
    "id": "button-name",
    // ... (其余 JSON 數(shù)據(jù))
  }
]

測試將通過檢查 results.violations 數(shù)組的長度是否等於 0 來執(zhí)行非?；镜臄嘌?。要運行測試，請將測試腳本更改為調(diào)用 Mocha：

<code>確保按鈕具有清晰的文本
確保前景和背景顏色之間的對比度滿足 WCAG 2 AA 對比度比率閾值
確保每個 HTML 文檔都有一個 lang 屬性
確保 <img  alt="用斧頭自動可訪問性檢查" ></img> 元素具有替代文本或無角色或演示角色
確保每個表單元素都有一個標(biāo)簽
確保 tabindex 屬性值不大于 0</code>

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

(後續(xù)內(nèi)容，關(guān)於高級配置、總結(jié)和常見問題的部分，可以根據(jù)之前的輸出進(jìn)行類似的改寫，保持內(nèi)容一致性，並調(diào)整語句和段落結(jié)構(gòu)，使之更流暢自然。)

以上是用斧頭自動可訪問性檢查的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！