无href属性a标签适用ARIA属性及axe DevTools告警问题咨询

无href属性a标签的ARIA属性配置方案 #

报错根因 #

没有href属性的a标签默认不具备原生交互语义，不会被辅助技术识别为可交互控件，也不支持键盘聚焦，这是axe DevTools触发违规的核心原因。

分场景解决方案 #

你添加的aria-label属性本身符合W3C规范要求，只需根据这个a标签的实际用途补充对应属性即可解决违规问题：

• 场景1：标签功能为跳转类链接
  优先选择补全href属性，这是兼容性最好的原生语义实现方案，无需额外添加ARIA属性即可通过检测。
  如果因业务逻辑限制无法添加href，需补充两个属性：

  1. 添加role="link"明确声明该元素的链接语义
  2. 添加tabindex="0"让元素支持键盘Tab聚焦
     同时需额外监听Enter键触发跳转逻辑，符合键盘交互规范。

• 场景2：标签功能为按钮类控件（比如点击展开内容、触发弹窗）
  补充以下属性：

  1. 添加role="button"明确声明按钮语义
  2. 添加tabindex="0"支持键盘聚焦
     同时需额外监听Enter、Space键触发点击逻辑，符合按钮类控件的交互要求。

• 场景3：标签仅作为内容容器无交互需求
  建议直接替换为div、span等通用容器标签，不需要使用a标签，从根源上避免语义错误。

适配后代码示例 #

如果你的场景是跳转类卡片，适配后代码如下：

<a class="no-underline h-100" role="link" tabindex="0" aria-label="Fund Balance" id="card0">
......
</a>

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