Google Lighthouse无障碍检测疑似误报：Esri开发场景咨询

问题背景 #

使用Esri Experience Builder开发Web应用时，简单应用能通过Lighthouse无障碍检查并获得合格分数，但开发包含嵌套面板与组件的复杂应用时，分数骤降。由于无法控制Esri的ADA属性实现，后端修复难度极大，现针对两处疑似误报案例寻求解决方案。

疑似误报案例 #

• 案例1：Lighthouse检测报错ul[role="tablist"]标签下无role="tab"子节点，但实际第二个tablist节点下的<a>标签带有role="tab"属性，推测因嵌套过深未被识别。尝试移除tablist属性无法解决问题，且该属性必须保留。
• 案例2：Lighthouse报错一个不存在的<div>节点，但DOM树中找不到对应元素，唯一可能匹配的是一个标记正确的<button>标签，无法理解检测逻辑。

解决方案建议 #

1. 确认检测时的DOM状态 #

Lighthouse检测依赖页面快照，动态渲染的嵌套组件可能未完全加载就被捕获。可尝试：

• 手动触发所有嵌套面板/组件加载完成后，再运行Lighthouse检测。
• 启用Lighthouse的"模拟慢速网络"功能，延长页面加载等待时间，确保所有DOM元素渲染完成。

2. 手动验证无障碍合规性 #

跳过Lighthouse误报项，直接依据WCAG标准手动验证：

• 对于tablist/tab结构，使用屏幕阅读器（如NVDA、VoiceOver）测试标签切换功能，确认焦点能正确跟随选中的tab，且屏幕阅读器能正确播报标签状态。
• 针对疑似误报的节点，检查是否存在动态生成/销毁的DOM元素，Lighthouse可能捕获了组件渲染过程中的中间状态。

3. 自定义Lighthouse配置排除误报 #

通过自定义配置文件跳过确认的误报规则：

1. 创建lighthouse-config.json文件，内容如下：

   {
     "extends": "lighthouse:default",
     "settings": {
       "onlyCategories": ["accessibility"],
       "skipAudits": [
         "aria-required-children" // 对应tablist子节点检测规则，根据实际误报规则调整
       ]
     }
   }
   

2. 运行Lighthouse时指定配置文件：lighthouse https://your-app-url --config-path=lighthouse-config.json

4. 反馈给Esri官方支持 #

将误报案例整理为详细报告（包含DOM结构截图、Lighthouse检测结果、复现步骤）提交给Esri支持团队，推动官方修复组件的无障碍属性实现，从根源解决问题。

内容的提问来源于stack exchange，提问作者GeoGene