Link无法显示Wave可访问性评估工具中的错误 [英] Link contain no text showing error in Wave accessibility evaluation tool

问题描述

我有一个HTML页面，其中有

I have an HTML page in which there is

<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> < $>标签内的标签，但我无法在锚标签内写入任何内容。

but from wave accessibility tool it's showing an error that the anchor tag contains no text, although I am using <i> tag inside the <a> tag, but I cannot write anything inside anchor tag.

推荐答案

我发现最好的选择是添加一个名为 sr-only，它隐藏了普通用户的标签，但允许屏幕阅读器看到它。 （我认为这是Bootstrap如何管理这些情况。）下面是一个例子：

What I have found to be the best option is to add a span tag with a class named "sr-only" that hides the tag from a regular user, but allows screen readers to see it. (I think it is how Bootstrap manages these situations.) Here's an example:

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

这篇关于Link无法显示Wave可访问性评估工具中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！