Axe 是用於網站和其他基於 HTML 的使用者介面的可訪問性測試引擎。它快速、安全、輕量,並且旨在與任何現有測試環境無縫集成,因此您可以在常規功能測試的同時自動化可訪問性測試。
註冊 axe 新聞,以了解有關 axe 功能、未來版本和活動的最新資訊。
Axe-core 有不同類型的規則,針對 WCAG 2.0、2.1、2.2 的 A、AA 和 AAA 級,以及許多最佳實踐,可幫助您識別常見的可訪問性實踐,例如確保每個頁面都有h1
標題,並幫助您您可以避免 ARIA 中的“陷阱”,例如您使用的 ARIA 屬性將被忽略。完整的規則清單、分組的 WCAG 等級和最佳實踐,可以在 doc/rule-descriptions.md 中找到。
使用 axe-core,您可以自動找到平均 57% 的 WCAG 問題。此外,當 axe-core 無法確定時,axe-core 會將元素傳回為“不完整”,需要手動審核。
為了在開發週期的早期捕獲錯誤,我們建議使用 axe-linter vscode 擴充。為了進一步提高測試覆蓋率,我們建議使用 axex Extension 中的智慧型開機測試。
首先下載安裝包:
npm install axe-core --save-dev
現在,將 javascript 檔案包含在您的裝置或測試系統中的每個 iframe 中:
< script src =" node_modules/axe-core/axe.min.js " > script >
現在,在測試中的每個新 UI 可見或公開的點插入呼叫:
axe
. run ( )
. then ( results => {
if ( results . violations . length ) {
throw new Error ( 'Accessibility issues found' ) ;
}
} )
. catch ( err => {
console . error ( 'Something bad happened:' , err . message ) ;
} ) ;
只有讓開發人員能夠承擔可訪問性測試和可訪問編碼實踐的責任,網路才能成為一個可訪問、包容的空間。
自動化可訪問性測試可以節省大量時間,不需要特殊的專業知識,並且允許團隊將專家資源集中在真正需要的可訪問性問題上。不幸的是,大多數輔助工具旨在在已達到開發過程結束的網站和應用程式上運行,並且通常不會給出清晰或一致的結果,從而在您認為產品已準備好交付時導致沮喪和延遲。
Axe 的建置是為了反映 Web 開發的實際運作方式。它適用於開發團隊可能使用的所有現代瀏覽器、工具和測試環境。使用 axe,可訪問性測試可以作為單元測試、整合測試、瀏覽器測試以及團隊日常執行的任何其他功能測試的一部分來執行。在早期開發過程中建立可訪問性測試可以節省時間、資源和各種挫折。
axe-core API 完全支援以下瀏覽器:
支援意味著我們將修復錯誤並嘗試定期測試每個瀏覽器。目前只有 Chrome 和 Firefox 對每個拉取請求進行了測試。
對 JSDOM 的支援有限。我們將嘗試使所有規則與 JSDOM 相容,但如果不可能,我們建議關閉這些規則。目前已知color-contrast
規則不適用於 JSDOM。
我們只能支援本地支援或正確填充功能的環境。我們不支援已棄用的 v0 Shadow DOM 實作。
axe-core API 套件包括:
axe.js
- 應包含在被測網站 (API) 中的 JavaScript 文件axe.min.js
- 上述檔案的縮小版本Axe 可以使用您的本地語言建置。為此,必須將本地化檔案新增至./locales
目錄中。該文件必須以以下方式命名:
。若要使用此語言環境建構 axe,請使用--lang
標誌執行 axe,而不是預設語言環境,如下所示:
grunt build --lang=nl
或等價:
npm run build -- --lang=nl
這將為 axe 建立一個新的版本,名為axe.
和axe.
。如果您想建立所有本地化版本,只需傳入--all-lang
即可。如果要建立多個本地化版本(但不是全部),可以將逗號分隔的語言清單傳遞給--lang
標誌,例如--lang=nl,ja
。
若要為 axe 建立新的翻譯,請先執行grunt translate --lang=
。這將在./locales
目錄中建立一個 json 文件,其中包含預設的英文文字供您翻譯。或者,您可以複製./locales/_template.json
。我們歡迎對 axe-core 進行任何本地化。有關如何貢獻的詳細信息,請參閱下面的貢獻部分。訊息語法的詳細資訊請參閱檢查訊息範本。
若要更新現有翻譯文件,請重新執行grunt translate --lang=
。這將添加用英語使用的新訊息並刪除未用英語使用的消息。
此外,可以透過將locale
物件傳遞給axe.configure()
在執行時套用區域設定。區域設定物件必須與./locales
目錄中的現有區域設定具有相同的形狀。例如:
axe . configure ( {
locale : {
lang : 'de' ,
rules : {
accesskeys : {
help : 'Der Wert des accesskey-Attributes muss einzigartig sein.'
}
// ...
} ,
checks : {
abstractrole : {
fail : 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
} ,
'aria-errormessage' : {
// Note: doT (https://github.com/olado/dot) templates are supported here.
fail : 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
}
// ...
}
}
} ) ;
Axe-core 支援以下語言環境。請注意,由於語言環境是由我們的社群貢獻的,因此不能保證它們包含版本中所需的所有翻譯。
Axe-core 每 3 到 5 個月就會發布一個新的次要版本,通常會引入新的規則和功能。我們建議安排時間升級到這些版本。安全性更新將針對18 個月內的次要版本系列提供。
DEQUE、DEQUELABS、AXE® 和 AXE-CORE® 是 Deque Systems, Inc. 的商標。
請參閱 axe-core ARIA 支持,以了解 axe 支援的 ARIA 角色和屬性的完整清單。
閱讀建議 Axe-core 規則指南
閱讀有關架構的文檔
閱讀有關貢獻的文檔
使用 axe-core 的項目列表
感謝 Marat Dulin 的 css-selector-parser 實現,它包含在 Shadow DOM 支援中。再次感謝 Slick Parser 實作者的貢獻,我們在影子 DOM 支援程式碼中使用了他們的一些演算法。感謝 Lea Verou 和 Chris Lilley 提供的 colorjs.io 庫,我們使用該庫在顏色格式之間進行轉換。
Axe-core 根據 Mozilla 公共授權 2.0 版分發。它捆綁了幾個依賴項,這些依賴項按照自己的條款分發。 (請參閱 LICENSE-3RD-PARTY.txt)