当前位置：紫竹林-程序员中文网 > 科技 > 正文

Web 无障碍工程化实战：VSCode 扩展 + AI 自动修复全解析

2025-11-18 分类：科技 阅读(12) 评论(0) 


                                                                                                                                                <h1>Web 无障碍工程化实战：VSCode 扩展 + AI 自动修复全解析</h1>

在大型Web系统开发中，界面是否符合无障碍设计标准，直接影响着不同能力用户的使用体验。

然而在功能复杂、界面繁多的Web系统中，开发团队往往将重心集中在业务逻辑实现和功能完整性上，容易忽视界面的可访问性设计，导致特殊用户群体无法正常使用系统功能。

通过遵循无障碍设计原则，可以确保视觉障碍、听觉障碍、运动障碍等不同需求的用户都能平等地访问和使用Web应用。

本文将从理论到实践，全面阐述无障碍开发的核心概念与实施方案。首先介绍无障碍开发的基本理念和重要意义，然后解析WCAG等主流无障碍规范标准，梳理当前可用的无障碍检测和修复工具生态。最后，本文将通过实现一个功能完整的VSCode扩展插件，为Web开发人员提供集成化的无障碍开发辅助工具，帮助开发团队在日常编码过程中更好地识别和解决无障碍问题。

引言

WCAG（Web Content Accessibility Guidelines） 是由 W3C 的 WAI 组织制定的网络内容无障碍标准。这套指南主要为残障人士提供更好的网络访问体验，同时也能改善所有用户和设备（包括数字助理等受限设备）的使用体验。

目前 WCAG 2.2 是最新的正式版本，而 WCAG 2.1 和 2.0 仍在广泛使用中。

WCAG 3.0 还处于工作草案阶段。新版本并不会取代旧版本，但 WAI 建议开发者优先使用最新版本，以确保网站获得最佳的无障碍访问效果。

无障碍指南：https://www.w3.org/TR/WCAG21/

Web界面案例分析

下图是一个存在多个问题的Web界面和修复后的结果

imgimg

存在无障碍问题的web界面

消除无障碍问题的web界面

从直观上看，左侧的web界面给人的印象是模糊混乱的，右侧的web界面给人的印象是简洁美观的。原因在于左侧的web界面没有考虑无障碍指南中提到的多个要点，下面我们将逐一分析界面存在的问题。

以下是左侧界面表格部分源码：

<h2>季度销售表</h2>
<table>
    <tr>
        <th>季度</th>
        <th>销售额</th>
        <th>区域</th>
    </tr>
    <tr>
        <td>Q1</td>
        <td>12000</td>
        <td><a href="#">东部</a></td>
    </tr>
    <tr>
        <td>Q2</td>
        <td>15000</td>
        <td><a href="#">西部</a></td>
    </tr>
    <tr>
        <td>Q3</td>
        <td>9000</td>
        <td><a href="#">南部</a></td>
    </tr>
    <tr>
        <td>Q4</td>
        <td>20000</td>
        <td><a href="#">北部</a></td>
    </tr>
</table>

在设计表格时，由于缺少 标签，表格标题用

写在外面。也没有使用 和 区分表头和数据区域，这将导致屏幕阅读器无法将标题与表格关联。

当表格没有正确标记的表头时，屏幕阅读器只能逐个朗读单元格内容，用户听到的是一串没有上下文的数据，完全不知道每个数据代表什么意思。除此之外，表格的样式设计也存在问题，虽然使用了奇偶行颜色差异，但是色差较小，最终给人的直观印象不够清晰明了

tbody tr:nth-child(even) {
    background: #FAFBFE;
}

img

修改后的代码如下：

<table>
    <caption class="visually-hidden">2025 年各季度按区域的销售额（单位：元）</caption>
    <thead>
        <tr>
            <th scope="col">季度</th>
            <th scope="col">销售额</th>
            <th scope="col">区域</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Q1</td>
            <td>12000</td>
            <td><a href="#">东部</a></td>
        </tr>
        <tr>
            <td>Q2</td>
            <td>15000</td>
            <td><a href="#">西部</a></td>
        </tr>
        <tr>
            <td>Q3</td>
            <td>9000</td>
            <td><a href="#">南部</a></td>
        </tr>
        <tr>
            <td>Q4</td>
            <td>20000</td>
            <td><a href="#">北部</a></td>
        </tr>
    </tbody>
</table>

除此之外，对颜色也做了调整：

tbody tr:nth-child(even) {
    background: #F5F8FF;
}

最终效果如下：

img

再来观察原界面的表单部分，输入框得到焦点后，样式设计也不够直观。

img

此外按钮的背景色和前景色的对比度也较小，不够清晰。

:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.25);
    border-radius: 4px;
}

.btn {
    display: inline-block;
    background: #4A90E2;
    color: #fff;
    padding: 5px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

让我们使用以下代码，修正表单样式，突出文本框得到焦点后的样式，让按钮的对比度更强烈

:focus-visible {
    outline: 3px solid #1A73E8;
    outline-offset: 2px;
}

.btn {
    background: #2F6BC2;
    color: #fff;
    padding: 8px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

img

修改之后的界面明显更清晰直观。

无障碍指南

基于以上分析，我们了解到web界面存在多种设计细节，每一处缺陷都可能让整个界面的用户体验大打折扣。

那么标准的无障碍指南都制定了那些规范呢？

让我们看看下表总结的内容：

设计原则 设计思路 代码分析
对比度达标 保证文字和背景有足够的对比度，用户能很容易分辨出页面的组件 /* ❌ 对比度不足 */ .bad-contrast { color: #999999; background: #ffffff; /* 对比度约 2.85:1 */ } /* ✅ 符合 AA 标准 */ .good-contrast { color: #595959; background: #ffffff; /* 对比度约 4.54:1 */ } /* ✅ 符合 AAA 标准 */ .excellent-contrast { color: #333333; background: #ffffff; /* 对比度约 7.73:1 */ }
图片设置替代文本 所有非文本内容提供合适的 alt，供读屏器朗读，辅助用户理解含义 <!-- ✅ 描述图片传达的信息 --> <img src="https://my.oschina.net/powertoolsteam/blog/sales-chart.png" alt="2023年第四季度销售额增长25%"> <!-- ❌ 不设置alt属性 --> <img src="https://my.oschina.net/powertoolsteam/blog/sales-chart.png">
键盘无障碍 所有功能可用键盘操作，焦点顺序合理且样式清晰可见 /* ✅ 清晰的焦点指示 */ button:focus { outline: 2px solid #005fcc; outline-offset: 2px; } /* ✅ 高对比度焦点样式 */ .custom-focus:focus { box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3); border: 2px solid #005fcc; } /* ❌ 移除焦点样式 */ button:focus { outline: none; }
表单可理解 每个输入有 <!-- ✅ 使用 fieldset 和 legend --> <fieldset> <legend>联系方式</legend> <label for="phone">电话</label> <input type="tel" id="phone"> <label for="email2">邮箱</label> <input type="email" id="email2"> </fieldset> <!-- ✅ 单选按钮组 --> <fieldset> <legend>选择付款方式</legend> <input type="radio" id="credit" name="payment" value="credit"> <label for="credit">信用卡</label> <input type="radio" id="paypal" name="payment" value="paypal"> <label for="paypal">PayPal</label> </fieldset>
语义结构与原生优先 正确使用标题层级、列表、表格表头/范围；优先使用 <!-- ✅ 使用原生按钮 --> <button type="button" onclick="submitForm()">提交</button> <!-- ❌ 用 div 模拟按钮 --> <div class="fake-button" onclick="submitForm()">提交</div> <!-- ✅ 原生链接 --> <a href="https://my.oschina.net/products">查看产品</a> <!-- ❌ 用其他标签模拟链接 --> <span class="fake-link" onclick="location.href="https://my.oschina.net/products"">查看产品</span>
响应式与可重排 在窄屏（如 320px）内容清晰可读、不需水平滚动 /* ✅ 相对单位确保可缩放 */ body { font-size: 1rem; /* 16px */ line-height: 1.5; } h1 { font-size: 2rem; /* 32px */ } /* ✅ 在小屏幕上适当调整 */ @media (max-width: 320px) { body { font-size: 0.9rem; } h1 { font-size: 1.75rem; } }

axe扫描器工具

除了上文详细介绍的各种无障碍界面设计原则，开发中我们可以借用扫描器工具，检查web界面是否存在问题。

axe DevTools 是由 Deque 开发的Chrome 浏览器扩展，专为开发者、测试人员和设计师打造的无障碍检测工具。它基于业界知名的 axe-core 引擎，能够快速、准确地发现并修复网站无障碍问题。

axe DevTools 安装地址：https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd

安装上述扩展后，可以按照如下步骤检测：

首先，打开开发者调试窗口：

img

找到新增的axe DevTools的tab标签，点击后即可打开axe 工具的界面

框选界面某个部分，即可开始检测。例如下图检测出表单存在一些问题：

img

VSCode 扩展实现界面无障碍检测

除了使用 axe DevTools工具，我们还可以使用其他工具进行检测

axe-core 是一个专为网站和 HTML 界面设计的无障碍测试引擎，支持 WCAG 2.0、2.1、2.2 各级别标准，具有快速、安全、轻量级的特点，能够无缝集成到现有测试环境中。

下面是一个简单的介绍：

首先安装 axe-core这个npm包：

npm install axe-core --save-dev

axe-core包提供了axe模块，该模块提供了一个run方法，运行之后可以检查出页面所有的无障碍问题，实现的JS代码如下：

axe
  .run()
  .then(results => {
    if (results.violations.length) {
      console.log('发现无障碍问题：', results.violations);
      throw new Error('Accessibility issues found');
    } else {
      console.log('未发现无障碍问题！');
    }
  })
  .catch(err => {
    console.error('检测过程中出错：', err.message);
  });

除此之外，我们还可以配置检测的具体规则，以及某条规则检测失败后，如何汇报警告消息

// 配置检测规则和级别
axe.configure({
  branding: {
    brand: "测试应用",
    application: "accessibility-checker"
  },
  rules: {
    // 禁用某些规则
    'color-contrast': { enabled: false },
    // 只检查 AA 级别
    'wcag2aa': { enabled: true }
  },
  // 只运行指定标签的规则
  tags: ['wcag2a', 'wcag2aa'] 
});

// 应用中文本地化
axe.configure({
  locale: {
    lang: 'zh',
    rules: {
      'missing-headings': {
        help: '页面应该包含至少一个 h1 标题'
      }
    },
    checks: {
      'color-contrast': {
        fail: '文本颜色与背景颜色对比度不足'
      }
    }
  }
});

基于以上对axe的基本使用，我们可以创建一个vscode扩展用来在编写web界面时检测无障碍问题。

1 使用如下命令搭建环境：

npm install -g yo generator-code

Yeoman 是微软推荐的脚手架工具，它会为我们生成完整的扩展项目结构：

  • yo: Yeoman 命令行工具，用于运行代码生成器
  • generator-code: 微软官方的 VSCode 扩展生成器，包含了扩展开发的最佳实践模板

生成的项目结构包含：

  • src/extension.ts: 扩展的主入口文件，包含 activate 和 deactivate 函数
  • package.json: 扩展的清单文件，定义扩展的功能、命令、配置等
  • tsconfig.json: TypeScript 编译配置
  • .vscode/: 包含调试配置，让我们能够直接在 VSCode 中调试扩展

2 安装依赖包

运行如下命令

cd accessibility-checker 
npm install axe-core jsdom 
npm install --save-dev @types/vscode
  • axe-core
    • 一个纯 JavaScript 库，可以在任何 JavaScript 环境中运行
    • 包含了 WCAG 2.0/2.1/2.2 的完整规则集，覆盖 A、AA、AAA 三个等级
  • jsdom: Node.js 环境下的 DOM 模拟器
    • 由于 axe-core 需要 DOM 环境才能运行，而 VSCode 扩展运行在 Node.js 中
    • jsdom 创建一个完整的虚拟 DOM 环境，让我们能在后端运行前端代码
    • 支持大部分 Web API，包括 document、window、Element 等
  • @types/vscode: VSCode API 的 TypeScript 类型定义
    • 提供完整的 VSCode 扩展 API 类型提示
    • 包含所有命令、事件、UI 组件的类型定义
    • 让我们能够安全地使用 VSCode 的各种功能
未经允许不得转载：紫竹林-程序员中文网 » Web 无障碍工程化实战：VSCode 扩展 + AI 自动修复全解析

相关推荐

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

近期文章

关于我们 免责申明 意见反馈 隐私政策
程序员中文网：公益在线网站，帮助学习者快速成长！
关注微信 技术交流
推荐文章
每天精选资源文章推送
推荐文章
随时随地碎片化学习
推荐文章
发现有趣的

Copyright©2010-2022 鄂ICP备16010909号