# 在项目中集成axe-core进行自动化测试示例
npm install axe-core axe-webdriverjs selenium-webdriver --save-dev

// 一个使用Node.js和axe-core对本地HTML文件进行扫描的简单脚本
const axe = require('axe-core');
const fs = require('fs');
const { JSDOM } = require('jsdom');

// 读取HTML文件
const html = fs.readFileSync('./dist/index.html', 'utf8');
const dom = new JSDOM(html);

// 将axe-core注入到JSDOM环境中
const window = dom.window;
global.window = window;
global.document = window.document;
global.Node = window.Node;

// 运行可访问性分析
axe.run(document, (err, results) => {
  if (err) throw err;
  if (results.violations.length > 0) {
    console.error('可访问性违规发现:');
    results.violations.forEach(violation => {
      console.error(`- [${violation.impact}] ${violation.help}`);
      violation.nodes.forEach(node => {
        console.error(`  元素: ${node.html}`);
      });
    });
    process.exit(1); // 在CI中使构建失败
  } else {
    console.log('未发现严重可访问性违规。');
  }
});

<!-- 问题代码 -->
<img src="chart.png">

<!-- 修复后代码 -->
<img src="chart.png" alt="2023年季度营收增长趋势柱状图，第四季度显著提升">

<!-- 问题代码 -->
<input type="text" id="username">
<button>提交</button>

<!-- 修复后代码 -->
<label for="username">用户名：</label>
<input type="text" id="username">
<!-- 或者使用aria-label -->
<button aria-label="提交订单">提交</button>

/* 问题样式 */
.button {
  color: #888; /* 浅灰色 */
  background-color: #fff; /* 白色 */
  /* 对比度仅为约2.5:1 */
}

/* 修复后样式 */
.button {
  color: #333; /* 深灰色 */
  background-color: #fff;
  /* 对比度提升至约12:1 */
}

<!-- 自定义按钮组件需添加正确的角色和tabindex -->
<div class="custom-btn" role="button" tabindex="0" @keydown.enter="handleClick" @keydown.space="handleClick">
  自定义按钮
</div>

// 动态内容需管理焦点
function openModal() {
  modal.style.display = 'block';
  // 将焦点移至模态框内的第一个可聚焦元素
  modal.querySelector('input, button').focus();
  // 同时需用aria-modal="true"标注，并暂时对背景内容做屏幕阅读器隐藏
}

<!-- 错误：用div模拟按钮但未提供交互 -->
<div role="button">保存</div>

<!-- 正确：使用原生button，或完整实现交互 -->
<div role="button" tabindex="0" aria-pressed="false" @click="toggle" @keydown="handleKeydown">
  切换
</div>
<!-- 最佳：直接使用<button> -->
<button>保存</button>