0

在我的网页上，我有一个锚（下面的代码），我在视觉上显示为完全隐藏文本的图像（标识）。我希望锚是：

  • 可访问 - 由屏幕阅读器正确阅读，
  • 鼠标悬停时显示工具提示（工具提示解释了图像标识，可能不是每个人都理解）。

我使用以下方法：

HTML

<a href="http://some-institution.com"
   title="Some Institution"
   class="replace-text-with-image">Some Institution</a>

CSS

.replace-text-with-image {
    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    /* Display the image. */
    width: <image-width>;
    height: <image-height>;
    background-image: url(<url-to-image>);
    background-size: <image-width> <image-height>;
    background-repeat: none;
}

上述方法存在的问题：

  • 一个人向我报告说，在遇到链接时，他的屏幕阅读器会阅读链接的内容（“某机构”）和链接的内容（“某机构” title），导致“卡顿”。
  • 我读到（在本文中）使用title可访问性是错误的，aria-label应该改用。

所以我尝试重构以同时使用aria-labeland title：

<a href="http://some-institution.com"
   title="Some Institution"
   aria-label="Some Institution"
   class="replace-text-with-image">Some Institution</a>

现在 NVDA（我正在测试的屏幕阅读器）同时读取title和aria-label属性，导致再次卡顿。

其他可能不起作用的解决方案：

  • 当我删除title属性并仅保留aria-label它时，它可以正常读取，但我无法删除title属性，因为这是对我想要拥有的视觉用户的解释。
  • 我也可以只保留title属性，完全删除锚的内容，但我觉得拥有一个空锚并不是一个特别好的做法，不是吗？

这个问题的最佳解决方案是什么？我真的在它周围失去了我的头......

4

2 回答 2

0

您应该考虑您必须赋予哪个 ARIA 角色。

是a[href]一个链接。它也可以是图像吗？不，所以，创建一个图像。

<a href="http://some-institution.com" aria-label="Some institution">
   <span class="replace-text-with-image" role="img" title="Some institution">Some institution</span>
</a>

这样，屏幕阅读器将宣布aria-label. 并且title将可供鼠标用户使用。

title对可访问性来说还不错，但对屏幕阅读器来说可能没用。因此，您不应仅依赖该title属性，但正如您完美指出的那样，aria-label它对非屏幕阅读器用户无用。

于 2017-11-30T19:32:23.640 回答
0

首先，我真的鼓励你使用最简单的标记，这将是一个围绕图像元素的锚元素，如下所示：https ://jsfiddle.net/pLuqqh​​8w/

您应该使用title锚元素的属性来描述链接的意图（即链接的位置），并使用alt属性来描述图像的意图（即它是什么）。这就是该技术的工作原理。和属性alt不title应该是同一件事。

话虽这么说，如果你真的想要一个屏幕阅读器没有宣布的工具提示，我建议这样做：https ://jsfiddle.net/neht6v01/

编辑：使用该title属性本身并没有错，它只是不应该依赖的东西，因为它在屏幕阅读器/浏览器组合中的支持非常不稳定。

于 2017-11-30T19:24:29.293 回答