随着全球化业务版图的扩张， 尤其是欧盟等市场对数字无障碍合规性的要求日益严苛， 无障碍已不再仅是体验优化的加分项， 而是研发质量的硬性指标。 然而， 在实际研发链路中， 无障碍缺陷往往潜伏在代码编写、页面渲染及真机交互的各个环节。 若仅在上线前集中排查， 沟通与返工成本将呈指数级上升。 为此， 我们打造了一套横跨Web端、代码编辑器与Android真机的无障碍自动化检测工具链， 旨在将合规检查前置， 形成“发现-定位-修复-沉淀”的质量闭环。
核心工具全景
整套工具链针对研发流程的不同阶段， 提供了三个核心检测入口：
- Web端Chrome插件：面向PC与H5页面， 一键扫描运行时无障碍问题。
- VS Code插件：面向Vue编码阶段， 实时拦截问题， 并结合大模型提供智能修复。
- 桌面端App检测工具：基于ADB与图像识别， 实现Android真机页面的自动化巡检。
Web端页面：基于浏览器插件的运行时一键检测
该工具遵循开源协议， 在Accessibility Insights for Web基础上进行定制化开发， 底层核心依赖axe-core引擎。 依托Chrome插件的多上下文架构， 实现页面注入、状态同步与结果展示。
多上下文架构与扫描链路
插件运行在四个核心上下文中：
- Popup：用户交互入口， 提供快速检测、评估等触发按钮。
- Background Service Worker：全局调度中心， 负责状态维护与消息分发。
- Target Page：被测真实页面， 插件向页面及iframe注入Content Script以获取DOM状态。
- Details View：结果展示页， 呈现扫描进度、问题列表及修复建议。
扫描并非简单透传axe-core结果。 原始数据会经过规则筛选、消息装饰和结果转换：一方面根据内置规则过滤本次需执行的检测项；另一方面将失败节点、原因、修复建议及帮助链接封装为统一卡片模型， 最终在结果页直观展示。
运行时检测的独特价值
此类检测直接捕获Web端页面真实渲染后的DOM状态， 全面覆盖PC与H5页面。 对于由组件组合、条件渲染、接口数据或运行时状态引发的无障碍缺陷， 源码静态扫描往往难以覆盖， 而浏览器插件可在最终产出物上进行真实验证。
编码阶段：VS Code插件的实时拦截与AI修复
若无障碍问题延迟至联调或测试阶段暴露， 修复成本将显著增加。 为此， 我们将检测能力前置至VS Code编辑器中。
Vue语法适配与源码定位
插件激活后会监听.vue文件的打开、保存及编辑器切换事件。 当识别到Vue文件时， 抽取template内容， 经语法预处理后构造为可被axe-core分析的DOM， 再将扫描结果映射回源码位置， 展示于VS Code的Problems面板及编辑器标红区域。
此过程面临两大技术挑战：
- Vue语法适配：真实项目中充斥着router-link、动态绑定:alt/:aria-label等写法。 插件需将这些Vue/Nuxt语法转换为axe-core易理解的标准HTML结构， 同时保持源码位置关系稳定， 确保问题能准确映射回原文件。
- 源码定位：根据DOM节点位置信息找到失败元素， 并精确换算为VS Code中的行列范围， 让开发者看到的不是抽象规则， 而是具体到某标签、某属性的代码提示。
基于大模型的Quick Fix机制
在检测之外， 插件提供Quick Fix能力。 触发修复时， 插件截取问题代码片段， 调用无障碍智能修复Agent生成方案。 为防止模型输出直接覆盖源码， 插件会先打开差异对比（Diff）视图， 经开发者确认后再应用修改。
这使得插件不仅能“指出问题”， 更能协助快速完成修复。 针对图片缺alt、按钮无文本、交互元素缺键盘支持等常见缺陷， 开发者可在编码阶段实现发现、理解与修复的闭环。
Android App：基于截图与XML的真机无障碍检测
Web端可依赖DOM运行时扫描， 但Android App面临不同技术环境：页面运行于真机， 控件信息源于Android View层级， 视觉问题需结合截图分析。 为此， 我们构建了基于Tauri + Vue的桌面端工具， 由Rust后端封装ADB能力。
数据采集与全页面滚动检测
用户连接Android手机并打开目标页面后， 工具自动采集当前屏截图与UI XML结构。 除单屏检测外， 工具支持全页面滚动检测：Rust后端循环执行“采集截图与XML -> 滑动至下一屏”， 当连续两屏数据一致时判定到达底部并停止， 避免无效滚动。 每一屏独立分析， 最终聚合成多屏报告。
结构+视觉双通道分析
App检测同时利用两类信号识别问题：
- XML语义规则：解析uiautomator dump生成的节点属性（text, content-desc, clickable, bounds等）， 识别TalkBack与交互问题。 例如：可交互元素缺无障碍标签、触摸目标小于推荐48dp、冗余描述词（如“按钮”“点击”）、链接文案含义不清、遍历顺序形成闭环等。
- 截图视觉分析：结合XML节点坐标与截图像素， 采样前景色与背景色计算WCAG对比度。 文本默认按4.5:1判断， 非文本内容按3:1判断。 结果保留具体色值与节点位置， 便于研发复现。
交互式报告与辅助视图
结果页将问题分为对比度、TalkBack、其他三类展示。 点击问题卡片， 左侧截图自动高亮对应区域；点击截图区域， 亦可反向定位问题列表。 针对长页面， 多屏缩略图支持快速切换。 此外， 工具生成触控热力图与色盲模拟图， 辅助团队从不同用户视角评估风险。 最终报告支持HTML/JSON导出及分享链接， 拉齐研发、测试与产品协作。
工具链协同：构建研发质量闭环
这套工具链的核心价值不在于单点能力的叠加， 而是让三类工具分别嵌入研发流程的不同环节：
- VS Code插件：问题前移， 让开发者在提交代码前消除明显缺陷。
- Chrome插件：验证Web端页面最终渲染结果。
- 桌面端App工具：解决Android真机页面的结构、视觉与触控问题。
三类工具配合后， 无障碍质量不再依赖一次性人工巡检， 而是进入“检测、定位、修复、验证、沉淀”的持续循环。 从工程实现看， 关键架构取舍包括：
- 规则复用：Web与VS Code插件均基于axe-core与WCAG A/AA标准， 降低自研规则风险。
- 检测互补：源码扫描前移发现， 运行时扫描覆盖真实状态。
- 双通道校验：App端XML定位控件语义， 截图发现视觉对比度问题。
- 人机协同：大模型生成建议， 开发者通过Diff审核后应用， 兼顾效率与可控。
- 结果沉淀：报告可导出、可分享， 进入团队协作流程。
落地收益：从专项治理到日常研发习惯
工具链落地后， 带来的变化不仅是新增几个检测入口， 更在于无障碍质量融入了日常研发节奏：
- 发现更早：编码阶段即拦截明显问题， 减少后期集中返工。
- 定位更准：Web端定位DOM节点， 源码定位行列， App端定位截图区域与控件属性。
- 修复更快：问题原因与修复建议即时呈现， 常见缺陷可由大模型生成修复方案。
- 协作更顺：统一报告输出， 方便研发、测试、产品在同一上下文沟通。
- 规则更全：每次扫描与修复反向完善规则库与最佳实践。
结语
无障碍建设的难点， 往往不在于“知道标准是什么”， 而在于如何让标准稳定进入日常研发。 通过Chrome插件、VS Code插件和桌面端App工具， 我们将无障碍检查从一次性评审转化为贯穿编码、联调、测试与回归的工程能力。 当缺陷可被自动捕获、精准定位、清晰解释， 并借助大模型辅助修复时， 无障碍便不再是少数人的专项工作， 而是逐步成为每位研发同学都能参与、也愿意持续执行的质量实践。
评论0