前端可访问性：自动化测试工具与实践指南

前端可访问性：自动化测试工具与实践指南

前言

各位前端小伙伴，今天咱们来聊聊可访问性的自动化测试。想象一下：

• 你开发了一个功能丰富的网站
• 手动测试时觉得一切正常
• 但发布后发现有很多可访问性问题
• 用户投诉不断

自动化测试可以帮助我们在开发过程中及时发现问题。今天咱们就来学习主流的可访问性测试工具和实践！

自动化测试工具概览

工具对比

axe-core 使用指南

基础使用

// 安装 npm install axe-core // 基本检测 import axe from 'axe-core'; async function runAxeTest() { const results = await axe.run(document, { // 配置选项 runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag21aa'] } }); // 处理结果 if (results.violations.length > 0) { console.error('发现可访问性问题:', results.violations); // 输出详细信息 results.violations.forEach((violation, index) => { console.log(`\n问题 ${index + 1}: ${violation.help}`); console.log(`影响: ${violation.impact}`); console.log('元素:', violation.nodes.map(n => n.target).join(', ')); }); } else { console.log('可访问性检测通过！'); } return results; }

自定义规则

const customRules = [{ id: 'custom-button-rule', description: '自定义按钮规则', help: '按钮必须有明确的文本内容', helpUrl: 'https://example.com/button-accessibility', category: 'custom', severity: 'error', matches: function(node, options, virtualNode) { return node.nodeName === 'BUTTON'; }, test: function(node, options, virtualNode) { const textContent = virtualNode.text || ''; return textContent.trim().length > 0; } }]; // 使用自定义规则运行检测 async function runCustomAxeTest() { const results = await axe.run(document, { rules: { ...axe.getDefaultRules(), 'custom-button-rule': customRules[0] } }); return results; }

Lighthouse 集成

CLI使用

# 安装Lighthouse npm install -g lighthouse # 运行检测 lighthouse https://example.com --view # 仅检测可访问性 lighthouse https://example.com --only-categories=accessibility

编程式使用

const lighthouse = require('lighthouse'); const chromeLauncher = require('chrome-launcher'); async function runLighthouse(url) { const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] }); const options = { logLevel: 'info', output: 'json', onlyCategories: ['accessibility'], port: chrome.port }; const runnerResult = await lighthouse(url, options); const accessibilityScore = runnerResult.lhr.categories.accessibility.score * 100; console.log(`可访问性得分: ${accessibilityScore}分`); // 输出详细报告 runnerResult.lhr.audits.forEach(audit => { if (audit.score === 0) { console.log(`\n失败: ${audit.title}`); console.log(audit.description); } }); await chrome.kill(); return runnerResult; } runLighthouse('https://example.com');

ESLint 集成

eslint-plugin-jsx-a11y

# 安装 npm install eslint-plugin-jsx-a11y --save-dev

// .eslintrc.js module.exports = { plugins: ['jsx-a11y'], rules: { // 强制img标签有alt属性 'jsx-a11y/alt-text': 'error', // 强制按钮有明确的文本 'jsx-a11y/button-has-type': 'error', // 强制label与表单元素关联 'jsx-a11y/label-has-associated-control': 'error',