Question

我的公司正在探索我们在设计中常用的一些场景，我们认为这些场景可能不是100％符合WCAG 2.0标准。

一个这样的场景是我们有锚标签（例如社交媒体链接）没有内容和伪元素上声明的背景图像。

我所知道的最佳选择是：

在链接

title

将文字添加到span中包含“仅限屏幕阅读器”类的链接中，例如eBay Mind Patterns中的此示例：

.clipped {
  border: 0 !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

明确地说，这是我们正在使用的伪类背景图像样式的一个例子

.pseudo::after {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    background-image: url('images/pizza.png');
}

哪些想法更符合要求？

选项1：标题，内部没有文字

<a title="pizza title" href="http://pizza.com" class="pseudo pizza"></a>

选项2：链接中只有屏幕阅读器的文字

<a href="http://pizza.com" class="pseudo pizza">
    <span class="clipped">pizza text</span>
</a>

Answer 1

简短回答：如果可能的话，更喜欢第二个。

title属性有点棘手，因为并非所有屏幕阅读器都默认读取它。因此，为了安全起见并且100％被屏幕阅读器覆盖，请使用<a>标签内的文字，并在需要时将其设为仅限屏幕阅读器。

Answer 2

我也会投票给第二个选项，但另一种方法是在链接中实际拥有文本内容，但在其CSS中添加text-indent: -5000px;（或其他类似的高负值）以将文本移出屏幕

Answer 3

如果难以在两个世界中最好的人之间做出选择，请不要尝试。

最简单的解决方案：

<a href="http://pizza.com" class="pseudo pizza" title="pizza text" aria-label="pizza test">
    <span class="clipped">pizza text</span>
</a>

为什么呢？因为非屏幕阅读器用户可以将title属性作为工具提示访问，并且屏幕阅读器可以在未配置使用剪辑文本时使用剪辑文本。

aria-label的使用也非常重要，因为使用CSS视觉隐藏元素可能会导致随机行为，具体取决于所使用的辅助技术。例如，一些辅助技术可能会选择删除不可见的文本而其他人则保留它们。

支持所有屏幕阅读器的最佳选择是使用以下三个选项：aria-label用于最近的屏幕阅读器，剪辑文本用于旧屏幕阅读器，以及title属性用于标准用户。

html可访问性：在伪元素上锚定带有背景图像的标签

3 个答案: