Lighthouse检测网站可访问性报错，axe-core相关问题求助

我的网站经Lighthouse检测出现以下可访问性错误：

• [aria-*] 属性与其角色不匹配
• 带有可见文本标签的元素应具有匹配的可访问名称，同时触发axe-core错误：RangeError: Maximum call stack size exceeded，系统提示环境不支持该功能，将跳过label-content-name-mismatch规则

（相关截图：）

已尝试为各区块设置唯一ID来调整aria-labelledby属性，但问题仍未解决，寻求技术帮助。

针对aria属性与角色不匹配的解决建议 #

1. 定位报错元素：在Lighthouse报告中点击错误条目，查看对应的DOM元素，确认元素的role属性和绑定的aria-*属性是否冲突。例如：
   • 若元素设置role="button"，则不能使用aria-readonly这类仅适用于输入控件的属性；
   • 检查aria-labelledby关联的ID是否真实存在，且无循环引用（如元素自身ID被自身引用，或A引用B、B又引用A）。
2. 遵循ARIA规范：确保每个aria属性都对应其角色的合法属性，优先使用原生HTML元素（比如用<button>替代div role="button"），减少自定义ARIA的使用，原生元素自带的可访问性支持更可靠。

针对axe-core调用栈溢出及标签名称不匹配的解决建议 #

1. 排查循环引用：调用栈溢出通常源于DOM元素存在循环的aria-labelledby/aria-describedby引用，检查所有设置了这些属性的元素，确保引用链是单向的，无闭环。
2. 简化DOM结构：若页面存在嵌套层级极深的元素，也可能触发调用栈溢出，尝试简化相关区域的DOM结构，减少不必要的嵌套层级。
3. 手动校验标签匹配：由于axe-core跳过了规则，手动检查可见文本标签与元素可访问名称的一致性：
   • 表单元素需确保<label>的for属性与输入框的id完全匹配；
   • 自定义组件需确保aria-label或aria-labelledby的内容与可见文本一致，避免出现“按钮显示‘提交’但aria-label为‘确认’”这类不匹配情况。

额外排查步骤 #

• 使用Chrome DevTools可访问性面板：在Elements面板的Accessibility标签下，查看元素的Computed Properties，确认可访问名称是否正确，以及aria属性是否存在冲突。
• 升级axe-core版本：若项目中使用了旧版axe-core，尝试升级至最新稳定版，新版本可能修复了调用栈溢出的bug。

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