AdSense手动广告报错：aria-*属性与角色不匹配，求解决方法

这个错误是无障碍检测工具（比如Lighthouse）检测到元素的role角色属性和它附带的aria-*无障碍属性语义不兼容导致的，以下是具体修复方法：

• 检查广告包裹容器的自定义属性
  别给包裹AdSense广告的容器乱加role或aria-*属性，比如给普通<div>加role="button"却没配aria-label，或者加了aria-expanded但角色不是button/menuitem这类支持该属性的角色。直接用无额外属性的干净容器包裹广告代码，示例：

  <!-- 正确写法 -->
  <div>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXX" crossorigin="anonymous"></script>
    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXX" data-ad-slot="XXX" data-ad-format="auto" data-full-width-responsive="true"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>
  

• 重新获取原始广告代码
  手动复制广告代码时如果误改了AdSense生成的ins元素或内部属性（比如乱加role），会触发冲突。直接去AdSense后台重新复制最新的手动广告代码，不要修改代码里的任何自带属性。

• 排查页面无障碍脚本干扰
  如果页面有自动给元素添加无障碍属性的插件/脚本，可能会误给AdSense广告元素加不匹配的aria-*属性。先禁用这类脚本测试，确认是它的问题后，给广告容器加排除规则，让脚本不处理广告元素。

• 精准定位冲突元素
  打开Chrome开发者工具的「无障碍」面板（更多工具→无障碍），找到报错的具体元素，查看它的role和对应的aria-*属性：

  • 比如role="img"的元素带了aria-expanded（这个属性只支持交互式角色）；
  • 或者role="link"的元素带了aria-checked（该属性对应复选框/单选框角色）。
    找到冲突后，删除或修正不匹配的属性即可。

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