檢測工具導入文件
自動化檢測工具功能為輔助進行無障礙規範符合度檢測,但無法取代手動檢測。可以被自動化檢測的規則,僅能檢測出 3-4 成已知的使用障礙,多數使用障礙仍需要透過手動檢測或使用者體驗才能夠發覺。在開發生命週期中,建議及早發現使用障礙並將其視為風險持續控管。不定期完成最小程度檢測,請參考 WAI Easy Checks 或 GOV.UK 基礎檢查,如檢測中發現任何未符合之情況,均以問題追蹤系統(issue tracker)納管修正。嚴謹的 WCAG 無障礙規範符合度稽核,建議遵循 Website Accessibility Conformance Evaluation Methodology, WCAG-EM 並可以搭配 WCAG-EM Report Tool 產出無障礙規範符合度報告。
WAI 無障礙檢測工具清單
Web Accessibility Initiative, WAI 透過工具發布者自行提報方式,蒐整了一份檢測工具清單。清單以網頁形式呈現並提供搜尋功能,根據檢測的目的(手動測試、自動測試、模擬使用者體驗)、標的(網站、行動 APP、文件、原始碼等),以及工具支援的標準(WCAG版本及等級、EPUB版本)、是否收費、工具類型(瀏覽器擴充元件、書籤、應用程式、線上工具等)等條件,篩選出最符合需求的工具來協助無障礙符合度檢測。也由於清單是由工具發布者自行提報,工具對於檢測規則的實作,是否能正確檢驗規格上宣稱的規範版本仍應加以驗證。值得注意的是部分工具有提供親和力宣告、以及是否實作 Accessibility Conformance Testing, ACT Rules,有助於了解工具的優勢與限制。
候選工具
- GitHub - dequelabs/axe-core: Accessibility engine for automated Web UI testing
- GitHub - pa11y/pa11y-ci: Pa11y CI is a CI-centric accessibility test runner, built using Pa11y
- Purple A11y - Automating Testing to Improve Web Accessibility for Apps and Websites - Singapore Government Developer Portal
- Accessibility testing - GitLab
搭配閱讀: CI/CD job template。 - Web Accessibility Pipeline - accessiBe
- Developer Tools for Accessibility Level Access
搭配閱讀: Mocha - the fun, simple, flexible JavaScript test framework (mochajs.org), BDD Testing & Collaboration Tools for Teams - Cucumber - HTML_CodeSniffer (squizlabs.github.io)
- @axe-core/reporter-earl - npm (npmjs.com)
- https://www.ibm.com/able/toolkit/tools
設計稿工具
這類型的工具可以針對設計稿,進行綜合性無障礙自動檢測、確保色彩組合有足夠對比度、在設計元素/元件標示焦點以及焦點順序、快速批次調整字級大小、模擬低視能者或不同樣態的色覺功能所看到的景象。
- Stark: The suite of integrated accessibility tools (getstark.co)
- axe for Designers: A Free Accessibility Plugin - Figma
- Contrast - Figma
- A11y - Focus Order - Figma
- Text Resizer - Accessibility Checker - Figma
- Low Vision - Figma
- Color Blind - Figma
- A11y Annotation Kit - Figma
- Inclusive Design illustrations - Figma
- Accessible design toolkit - Figma
持續設計(Continuous Design)
涉及到設計稿的版本控制與合併,透過這類工具可以確保設計階段不會重覆引入已知的使用障礙。
- figma-plugin-continuous-design/README.md at main · mikaelvesavuori/figma-plugin-continuous-design · GitHub
搭配閱讀:- GitHub - mikaelvesavuori/github-ci-demo: This is a basic demonstration of what is needed to run a GitHub Actions CI build by calling their REST API.
- Mikael Vesavuori / gitlab-ci-demo · GitLab
- GitHub - mikaelvesavuori/azure-devops-ci-demo: This is a basic demonstration of what is needed to run a Azure DevOps CI build by calling their REST API. We are using Figmagic for this demo, to demonstrate running it in CI.
- Level Access Figma plugin - Figma
- Tokens Studio for Figma (Figma Tokens) - Figma
- Token Export - Figma
搭配閱讀:Design Tokens Format Module
Git 提交檢查(Git Hooks)
Git Hooks 類型工具透過 Git 版本控制系統中的提交事件觸發自動檢測。
程式風格檢查(Linter)
Linter 類型工具可以檢測 React (JSX), React Native, Angular, Vue, HTML, Markdown 等靜態檔案內呈現出的使用障礙,在開發階段就可以發現問題。在 pull request 被審核或程式版本合併前,自動進行檢測並產出報告。
- axe Accessibility Linter - Visual Studio Marketplace
- axe Linter · GitHub Marketplace · GitHub
搭配閱讀:Using the axe DevTools Linter GitHub Action - Deque Docs - AccessLint - Automated and continuous web accessibility testing
- ASLint - Accessibility testing tool
- GitHub - AccessLint/accesslint.js: Keep accessibility errors in check.
- GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.
- GitHub - FormidableLabs/eslint-plugin-react-native-a11y: React Native specific accessibility linting rules.
- React’s Accessibility Code Linter - 24 Accessibility (24a11y.com)
- GitHub - maranran/eslint-plugin-vue-a11y: Static AST checker for accessibility rules on elements in .vue
- GitHub - vue-a11y/eslint-plugin-vuejs-accessibility: An eslint plugin for checking Vue.js files for accessibility
- @angular-eslint/eslint-plugin-template - npm (npmjs.com)
搭配閱讀:Angular ESLint Rules for Accessible HTML Content - DEV Community
單元測試(Unit Test)
單元測試工具可以將使用障礙測試案例整合到單元測試流程中,針對元件層級進行測試。
- GitHub - dequelabs/agnostic-axe: Framework agnostic accessibility reporter, powered by axe-core
- @axe-core/react - npm (npmjs.com)
驗收測試(Acceptance Test)
驗收測試可以將使用障礙測試案例整合到端到端(End-to-end, E2E)測試流程中,對多個元件進行整合性測試。
- cypress-axe - npm (npmjs.com)
搭配閱讀:🚅 Building a Cypress Accessibility Pipeline with Next.js and Axe - DEV Community
效能測試(Performance Test)
效能測試可以針對網頁應用程式進行即時的頁面層級測試,自動化檢測規則涵蓋效能、無障礙、最佳實作、最佳搜尋(SEO)、漸進式增強應用程式等面向。