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

Question

我的公司正在探索一些我们在设计中通常使用的场景，我们意识到这些场景可能并非100％符合WCAG 2.0标准。

一种这样的情况是，我们有锚标签（例如社交媒体链接），该锚标签没有内容，并且在伪元素上声明了背景图像。

我知道的最好的替代方法是：

1. 在链接上使用title属性

2. 使用“仅限屏幕阅读器”类将文本添加到包裹在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

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

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属性。