链接不包含Wave可访问性评估工具中显示错误的文本

Question

我有一个HTML页面

<a href="example.com"><i class="myclass"></i></a>

<a href="http://www.google.com" class="cart visible-xs"><i   class="t-icon t-icon-cart-xs-2"></i></a>

但是从波形可访问性工具它显示一个错误,锚标签不包含文本,虽然我在<i>标签内使用<a>标签,但我不能在锚标签内写任何东西.

Answer 1

根据WAVE工具,<a>您提供的两个元素都包含违反WCAG 2.0准则2.4.4"链接目的(在上下文中)"的空链接.

从WAVE工具:

" 它意味着什么 链接不包含文字.

重要性 如果链接不包含文本,则链接的功能或用途不会呈现给用户.这可能会给键盘和屏幕阅读器用户带来混乱.

如何修复 删除空链接或在链接中提供描述该链接的功能和/或目标的文本.

算法... in English 锚元素有一个href属性,但不包含文本(或只包含空格),也没有包含替代文本的图像.

一个简单的方法来修复错误是一个添加aria-label属性的<a>元素:

<a href="https://example.com" aria-label="first link"><i class="myclass"></i></a>

<a href="https://www.google.com" class="cart visible-xs" aria-label="second link"><i class="t-icon t-icon-cart-xs-2"></i></a>

Answer 2

我发现最好的选择是添加一个span标签,其中包含一个名为"sr-only"的类,该类隐藏了常规用户的标签,但允许屏幕阅读器查看它.(我认为这是Bootstrap管理这些情况的方式.)这是一个例子:

<a href="example.com">
    <i class="myclass"></i>
    <span class="sr-only">Visit example.com</span>
</a>

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
</style>