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>

但是从wave辅助功能工具中它显示了一个错误，即锚标记不包含文本，虽然我在<i>标记内使用<a>标记，但我无法在锚标记内写任何内容。

Answer 1

根据WAVE tool，您提供的两个<a>元素都包含违反WCAG 2.0 Guideline 2.4.4 "Link Purpose (In Context)"的空链接。

从WAVE工具：

“意味着什么 链接不包含任何文字。

为何重要 如果链接不包含文本，则链接的功能或用途将不会呈现给用户。这可能会给键盘和屏幕阅读器用户带来困惑。

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

算法......英文 锚元素具有href属性，但不包含文本（或仅包含空格），也不包含替代文本的图像。“

修复错误的一种简单方法是向<a>元素添加aria-label attribute：

<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

我发现最好的选择是添加一个名为＆＃34; sr-only＆＃34;的类的 span 标记。它隐藏了普通用户的标签，但允许屏幕阅读器查看它。（我认为这是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>

Answer 3

正如您所注意到的，您的链接不包含任何内容。是的，它包含一个i元素，但它是空的。

我假设你想通过CSS添加图像。但这是无法获得的。没有CSS支持的用户代理或无法感知图像的用户将无法使用此链接。

您应该使用img元素，而不是alt属性;这是包含不仅仅是装饰的图像的正确元素。

如果使用CSS来包含图像，则至少应在a元素中提供一些文本（如果必须，可以通过CSS直观地隐藏）。（为了这个目的，你should not use the i element。）

Answer 4

如果您无法在锚标记内写任何内容，则可以在title标记中添加a属性：

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

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

4 个答案: