AI 辅助前端可访问性测试：从 WCAG 合规检测到智能修复

AI 辅助前端可访问性测试：从 WCAG 合规检测到智能修复

一、可访问性的"隐形债务"：为什么 80% 的网站不合规

Web 可访问性（Accessibility，a11y）是前端工程中最容易被忽视的质量维度。WebAIM 的年度调查显示，排名前 100 万的网站首页中，96.3% 存在 WCAG 2.1 检测到的可访问性错误。某大型电商平台在收到用户投诉后进行可访问性审计，发现 2000+ 页面存在 12000+ 个 a11y 问题——缺少 alt 文本、颜色对比度不足、键盘无法操作、ARIA 标签错误。手动修复这些问题的预估工时超过 800 人天。

传统自动化检测工具（如 axe-core、Lighthouse）只能发现约 30% 的可访问性问题——它们擅长检测"有没有 alt 属性"，但无法判断"alt 文本是否有意义"。AI 辅助的可访问性测试正是为弥补这一空白而生：用 LLM 判断 alt 文本与图片内容的匹配度、用视觉模型检测颜色对比度的实际感知效果、用语义理解评估 ARIA 标签的合理性。

二、AI 辅助可访问性测试的架构设计

flowchart TB
subgraph 输入["页面输入"]
HTML[DOM 树]
CSS[样式表]
IMG[图片资源]
end

subgraph 规则引擎["规则引擎（axe-core）"]
R1[结构检测: alt/aria/role]
R2[对比度检测: 颜色比值]
R3[键盘检测: focus/tabindex]
end

subgraph AI引擎["AI 语义引擎"]
A1[alt 文本语义匹配]
A2[ARIA 标签合理性]
A3[交互流程可操作性]
end

subgraph 修复建议["智能修复"]
F1[自动修复建议]
F2[代码补丁生成]
end

HTML –> R1
CSS –> R2
HTML –> R3
IMG –> A1
HTML –> A2
HTML –> A3

R1 –> F1
R2 –> F1
R3 –> F1
A1 –> F2
A2 –> F2
A3 –> F2

style 规则引擎 fill:#ffd,stroke:#333
style AI引擎 fill:#dfd,stroke:#333
style 修复建议 fill:#ddf,stroke:#333

三、AI 辅助可访问性测试的代码实现

// a11y-test-engine.ts — AI 辅助可访问性测试引擎

interface A11yIssue {
ruleId: string;
severity: 'critical' | 'serious' | 'moderate' | 'minor';
element: string; // CSS 选择器
description: string;
aiSuggestion?: string; // AI 生成的修复建议
autoFix?: CodePatch; // 可自动应用的代码补丁
}

interface CodePatch {
filePath: string;
original: string;
replacement: string;
}

interface AltTextEvaluation {
altText: string;
imageUrl: string;
relevanceScore: number; // 0-1，alt 文本与图片的相关度
suggestedAlt: string; // AI 建议的 alt 文本
}

class A11yTestEngine {
private axeRunner: AxeRunner;
private aiEvaluator: AIEvaluator;

constructor(aiClient: AIClient) {
this.axeRunner = new AxeRunner();
this.aiEvaluator = new AIEvaluator(aiClient);
}

async auditPage(page: Page): Promise<A11yReport> {
// 阶段1：规则引擎检测（快速，确定性）
const ruleIssues = await this.axeRunner.run(page);

// 阶段2：AI 语义增强检测（慢速，语义理解）
const aiIssues = await this.runAIEvaluation(page);

// 阶段3：合并结果，去重并生成修复建议
const allIssues = this.mergeIssues(ruleIssues, aiIssues);
const withSuggestions = await this.generateSuggestions(allIssues);

return {
totalIssues: withSuggestions.length,
criticalCount: withSuggestions.filter(i => i.severity === 'critical').length,
issues: withSuggestions,
wcagLevel: this.estimateWCAGLevel(withSuggestions),
};
}

private async runAIEvaluation(page: Page): Promise<A11yIssue[]> {
const issues: A11yIssue[] = [];

// 检测1：alt 文本语义匹配
const images = await page.$$eval('img', (imgs) =>
imgs.map(img => ({
src: img.src,
alt: img.alt || '',
selector: img.id ? `#${img.id}` : `img[src="${img.src}"]`,
}))
);

for (const img of images) {
if (!img.alt) continue; // 缺少 alt 的问题由规则引擎处理

const evaluation = await this.aiEvaluator.evaluateAltText(
img.src, img.alt
);

if (evaluation.relevanceScore < 0.5) {
issues.push({
ruleId: 'ai-alt-relevance',
severity: 'serious',
element: img.selector,
description: `alt 文本 "${img.alt}" 与图片内容不匹配（相关度: ${evaluation.relevanceScore.toFixed(2)}）`,
aiSuggestion: `建议修改为: "${evaluation.suggestedAlt}"`,
});
}
}

// 检测2：ARIA 标签合理性
const ariaElements = await page.$$eval('[aria-label], [aria-labelledby], [role]',
(elems) => elems.map(el => ({
selector: el.id ? `#${el.id}` : el.tagName.toLowerCase(),
ariaLabel: el.getAttribute('aria-label') || '',
ariaLabelledby: el.getAttribute('aria-labelledby') || '',
role: el.getAttribute('role') || '',
textContent: el.textContent?.slice(0, 100) || '',
}))
);

for (const el of ariaElements) {
const isReasonable = await this.aiEvaluator.evaluateAriaLabel(
el.role, el.ariaLabel, el.textContent
);
if (!isReasonable.valid) {
issues.push({
ruleId: 'ai-aria-reasonable',
severity: 'moderate',
element: el.selector,
description: `ARIA 标签不合理: ${isReasonable.reason}`,
aiSuggestion: isReasonable.suggestion,
});
}
}

return issues;
}

private async generateSuggestions(issues: A11yIssue[]): Promise<A11yIssue[]> {
// 为每个问题生成代码级修复建议
const enhanced = […issues];
for (const issue of enhanced) {
if (!issue.aiSuggestion) {
issue.aiSuggestion = await this.aiEvaluator.generateFixSuggestion(issue);
}
}
return enhanced;
}

private mergeIssues(ruleIssues: A11yIssue[], aiIssues: A11yIssue[]): A11yIssue[] {
// 去重：同一元素的同类问题只保留 AI 增强版本
const seen = new Set<string>();
const merged: A11yIssue[] = [];

for (const issue of […ruleIssues, …aiIssues]) {
const key = `${issue.element}::${issue.ruleId}`;
if (!seen.has(key)) {
seen.add(key);
merged.push(issue);
}
}
return merged;
}

private estimateWCAGLevel(issues: A11yIssue[]): 'A' | 'AA' | 'AAA' | '不合规' {
const criticals = issues.filter(i => i.severity === 'critical').length;
const serious = issues.filter(i => i.severity === 'serious').length;
if (criticals > 0) return '不合规';
if (serious > 5) return 'A';
if (serious > 0) return 'AA';
return 'AAA';
}
}

// AI 评估器
class AIEvaluator {
private aiClient: AIClient;

constructor(aiClient: AIClient) {
this.aiClient = aiClient;
}

async evaluateAltText(imageUrl: string, altText: string): Promise<AltTextEvaluation> {
const prompt = `
评估以下图片的 alt 文本是否准确描述了图片内容。
图片URL: ${imageUrl}
当前alt文本: "${altText}"

请输出JSON：
{
"relevance_score": 0.0-1.0,
"suggested_alt": "更准确的alt文本",
"reason": "评分理由"
}
`;
const response = await this.aiClient.generate(prompt);
return JSON.parse(response);
}

async evaluateAriaLabel(
role: string, ariaLabel: string, textContent: string
): Promise<{ valid: boolean; reason: string; suggestion: string }> {
const prompt = `
评估以下 ARIA 标签是否合理：
role="${role}", aria-label="${ariaLabel}", 元素文本="${textContent}"

检查点：
1. aria-label 是否与元素功能一致
2. role 是否与元素实际行为匹配
3. 是否存在冗余或矛盾的标签

输出JSON: {"valid": bool, "reason": "str", "suggestion": "str"}
`;
const response = await this.aiClient.generate(prompt);
return JSON.parse(response);
}

async generateFixSuggestion(issue: A11yIssue): Promise<string> {
const prompt = `
可访问性问题: ${issue.description}
元素: ${issue.element}
规则: ${issue.ruleId}

请给出具体的代码修复建议（仅输出修复代码片段）。
`;
return this.aiClient.generate(prompt);
}
}

四、AI 辅助可访问性测试的 Trade-offs

AI 评估的延迟成本。规则引擎检测一个页面约 1-3 秒，AI 语义评估每个元素需要 0.5-2 秒，一个包含 50 个图片的页面 AI 评估可能需要 25-100 秒。建议在 CI 流水线中仅运行规则引擎检测，AI 评估作为定期审计任务独立运行。

AI 建议的可靠性。LLM 生成的 alt 文本建议可能包含幻觉——描述了图片中不存在的内容。必须将 AI 建议标记为"待人工确认"，而非直接自动应用。自动修复仅限于确定性高的场景（如添加缺失的 alt="" 装饰性图片标记）。

检测覆盖率与成本。规则引擎覆盖约 30% 的问题，AI 评估可额外覆盖约 40%，剩余 30% 需要人工测试（如屏幕阅读器实际体验）。完全依赖自动化测试是不够的，AI 辅助的目标是减少而非替代人工审计。

多语言场景的复杂性。alt 文本和 ARIA 标签的语义评估需要理解页面语言，多语言站点的 AI 评估需要切换语言模型或 Prompt 语言，增加了工程复杂度。

五、总结

AI 辅助可访问性测试通过"规则引擎 + AI 语义引擎"的双层架构，将检测覆盖率从 30% 提升到约 70%。规则引擎快速检测结构性问题，AI 引擎评估语义合理性并生成修复建议。但 AI 评估的延迟成本、建议的可靠性风险和检测覆盖率的剩余缺口，决定了自动化测试只能减少而非替代人工审计。工程落地的务实策略是：CI 中集成规则引擎检测（快速反馈），定期运行 AI 语义评估（深度审计），关键页面保留人工测试（体验保障）。