PageSpeed Insights无障碍评分显示问号及对比度错误问题求助

• 先搞定对比度错误的根源
  PageSpeed的对比度检测比Axe更较真，尤其是动态内容场景：

  • 查页面里动态加载的文本/背景：比如懒加载模块、滚动才触发的样式变化，Axe静态检测可能没抓着，但PSI是模拟真实加载流程，能揪出加载过程中短暂出现的低对比度状态
  • 查透明元素/渐变背景：PSI会计算实际渲染的颜色值，要是渐变背景某段和文本对比度不够，哪怕Axe没报错，PSI也会触发提示
  • 用Chrome DevTools的颜色对比度检测器（元素面板→样式→颜色块旁的小眼睛），挨个检查所有文本元素，包括hover、focus状态的样式

• 修复无障碍评分不显示的问题
  评分显示问号基本是PSI的无障碍检测流程中断导致，多半和对比度错误直接挂钩：

  • 先把所有对比度错误修好：PSI的无障碍检测碰到严重对比度问题会直接终止，没法生成完整评分，修复后再测试
  • 查页面有没有阻塞检测的JS/CSS：比如某些乱改DOM的脚本，导致PSI爬虫解析不了页面结构，可临时禁用非必要脚本测试，定位问题代码
  • 核对页面的语义化标签：缺失<html lang>、ARIA属性写错都可能让检测流程卡壳，Axe对轻微问题容忍度高，但PSI管得严

• 验证修复效果

  • 修复后先用Chrome DevTools里的Lighthouse测试（和PSI用的是同一内核），确认对比度错误消失、无障碍评分能正常生成
  • 再提交到PSI测试，记得勾选「清除缓存」选项，避免旧缓存影响结果

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