Anchor contains no text报错如何修复？a标签无文本问题处理方法

这个报错是可访问性检测工具识别到a标签内无有效可识别文本导致的，可根据你的实际业务场景选择以下任意一种方案修复：

方案1：补全a标签内部文本 #

如果你的导航按钮支持显示可见文字，直接在a标签内部添加对应文本即可：

<a href="#sidewidgetarea" aria-label="Navigation Menu" aria-expanded="false" class="closed">
  导航菜单
</a>

如果不想让文字在页面上可见，仅供给屏幕阅读器识别，可以给文本加屏幕阅读器专用的隐藏类，自定义类样式参考：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

对应代码修改为：

<a href="#sidewidgetarea" aria-label="Navigation Menu" aria-expanded="false" class="closed">
  <span class="sr-only">导航菜单</span>
</a>

方案2：给a标签添加title属性 #

如果不想改动a标签内部结构，直接新增title属性，属性值和链接功能保持一致即可：

<a href="#sidewidgetarea" aria-label="Navigation Menu" aria-expanded="false" class="closed" title="导航菜单">
  <span ...></span>
</a>

方案3：内部用图片做图标时补全alt属性 #

如果a标签内包裹的是图标图片，直接给img标签添加和功能匹配的alt属性：

<a href="#sidewidgetarea" aria-label="Navigation Menu" aria-expanded="false" class="closed">
  <img src="menu-icon.png" alt="导航菜单">
</a>

如果使用的是字体图标或者SVG图标，给图标元素加aria-hidden="true"隐藏可访问性识别，再配合方案1的隐藏文本即可。

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