Link 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>

但是从 wave 可访问性工具中它显示错误，锚标记不包含文本，虽然我在 <a> 标记内使用 <i> 标记，但我不能在锚标记内写任何东西。

Answer 1

如您所见，您的 link 不包含任何内容。是的，它包含一个 i 元素，但它是空的。

我假设您想通过 CSS 添加图片。但这是不可访问的。没有 CSS 支持的用户代理，或无法感知图像的用户将无法使用此 link。

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

如果您使用 CSS 来包含图像，您至少应该在 a 元素中提供一些文本（可以在视觉上通过 CSS 隐藏，如果必须的话）。（而你 should not use the i element 为此目的。）

Answer 2

我发现最好的选择是添加一个 span 标签和一个名为 "sr-only" 的 class 来隐藏标签用户，但允许屏幕阅读器看到它。（我认为这就是 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

根据 WAVE tool the two <a> elements you provided both contain Empty Links which violate WCAG 2.0 Guideline 2.4.4 "Link Purpose (In Context)".

来自 WAVE 工具：

"这是什么意思 link 不包含文本。

为什么重要 如果 link 不包含文本，则 link 的功能或目的将不会呈现给用户。这会给键盘和屏幕 reader 用户带来困惑。

如何修复 删除空的 link 或在 link 中提供描述 link 的功能 and/or 目标的文本。

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

修复错误的一种简单方法是将 aria-label attribute 添加到 <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>

Link Wave 辅助功能评估工具中没有显示错误的文本

Link contain no text showing error in Wave accessibility evaluation tool

html

accessibility

hyperlink