使用FontAwesome的HTML标签被自动添加aria-hidden="true"，如何阻止？

属性自动添加的原因 #

这是FontAwesome内置的默认无障碍优化机制，该逻辑直接集成在FontAwesome核心脚本中，所以你排查自有业务JS找不到对应代码。
这套机制的设计初衷是自动屏蔽无实际语义的图标元素，避免屏幕阅读器播报冗余内容，降低无障碍适配的基础工作量，默认会给所有挂载了FontAwesome图标的DOM节点自动加上aria-hidden="true"属性。

仅阻止a标签被添加属性的实现方案 #

你可以根据自身项目结构选择以下任意一种方案：

• 方案一：给需要排除的a标签添加专属标识属性
  FontAwesome的自动处理逻辑会识别data-auto-add-aria-hidden="false"属性，携带该属性的节点不会被自动注入aria-hidden，不需要调整全局配置。
  用法示例：

  <a href="/目标地址" class="fa fa-xxx" data-auto-add-aria-hidden="false">链接文本</a>
  

• 方案二：全局关闭自动无障碍属性添加逻辑
  在引入FontAwesome脚本之后新增全局配置，关闭自动添加aria-hidden的能力，之后手动给所有用到的<i>标签加上aria-hidden="true"即可。
  配置代码：

  window.FontAwesomeConfig = {
    autoA11y: { enabled: false }
  }
  

• 方案三：调整DOM结构符合最佳实践
  不建议直接将FontAwesome的图标类挂载到可交互的a标签上，更合理的写法是把图标放在a标签内部的<i>子节点中，既不会影响a标签的无障碍属性，也能让<i>节点正常触发自动添加aria-hidden="true"的逻辑，不需要额外配置。
  用法示例：

  <!-- 不推荐：图标类直接挂载到a标签 -->
  <a href="/目标地址" class="fa fa-home">首页</a>
  <!-- 推荐：图标放在a内部的i标签中 -->
  <a href="/目标地址">
    <i class="fa fa-home"></i>
    首页
  </a>
  

如果你选择保留将图标类直接挂载到a标签的写法，记得给对应a标签补充aria-label属性或者屏幕阅读器专属的隐藏文本，保证站点符合ADA合规要求。

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