如何设置Chart.js生成的隐藏iframe的title以解决Lighthouse报错？

这个无title的隐藏iframe是Chart.js 2.x版本为了实现高DPI屏幕兼容、字体尺寸测量逻辑自动创建的辅助节点，默认对普通用户不可见，但是会触发Lighthouse的可访问性校验规则，可通过以下几种方案解决：

• 升级Chart.js版本
  Chart.js 3.x及以上正式版本已经移除了隐藏iframe的实现逻辑，替换为canvas内置的文本测量方案，直接将依赖升级到3.x/4.x稳定版即可彻底消除该报错，无需额外适配。
• 手动为生成的iframe补充title属性
  如果因业务兼容问题无法升级版本，可以在Chart实例初始化完成后，通过DOM匹配找到该隐藏节点，手动注入title属性，示例代码如下：

  // Chart实例初始化完成后执行
  const hiddenChartIframes = document.querySelectorAll('iframe[style*="position: absolute"][style*="left: -9999px"]');
  hiddenChartIframes.forEach(iframe => {
    if (!iframe.hasAttribute('title')) {
      // 可自定义title内容，只要清晰说明节点作用即可
      iframe.setAttribute('title', 'Chart.js内部渲染辅助节点（隐藏）');
    }
  });
  

• 为iframe添加aria-hidden属性跳过校验
  该隐藏iframe本身不会被屏幕阅读器等辅助设备识别，你也可以为它添加aria-hidden="true"属性，Lighthouse的可访问性检测会直接跳过该节点的title校验，示例代码如下：

  const hiddenChartIframes = document.querySelectorAll('iframe[style*="position: absolute"][style*="left: -9999px"]');
  hiddenChartIframes.forEach(iframe => {
    iframe.setAttribute('aria-hidden', 'true');
  });
  

• 框架场景适配
  如果你使用的是vue-chartjs、react-chartjs-2等框架封装的Chart组件，把上述DOM操作逻辑放到组件挂载完成的生命周期钩子中执行即可生效。

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