使用标题(标题和咏叹调标签)替换图像的可访问元数据

时间:2017-11-30 12:53:36

标签: accessibility wai-aria screen-readers wcag web-accessibility

在我的网页上,我有一个锚点(下面的代码),我在视觉上显示为完全隐藏文本的图像(标识)。我想锚点是:

  • 可访问 - 由屏幕阅读器正确阅读,
  • 在鼠标悬停时显示工具提示(工具提示解释了图像标识,每个人都不了解)。

我使用以下方法:

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

上述方法存在的问题:

  • 一个人告诉我,在遇到链接时,他的屏幕阅读器会同时读取链接内容(“Some Institution”)和链接title(“Some Institution”),导致“口吃”
  • 我读过(in this article)使用title进行无障碍访问是错误的,应该使用aria-label

所以我尝试重新分解以同时使用aria-labeltitle

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

现在NVDA(我正在测试的屏幕阅读器)读取titlearia-label属性,导致再次出现口吃。

其他可行的解决方案:

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

该问题的最佳解决方案是什么?我真的很想不起它......

2 个答案:

答案 0 :(得分:0)

首先,我真的鼓励你使用最简单的标记,这是一个包裹在图像元素周围的锚元素,如下所示:https://jsfiddle.net/pLuqqh8w/

您应该使用锚元素的title属性来描述链接的 意图 (即它的去向),然后使用{ {1}}属性用于描述图像的 意图 (即它是什么)。这就是该技术的设计方式。 altalt属性不应该相同。

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

编辑:使用title属性本身并没有错,因为它在屏幕阅读器/浏览器组合中非常缺乏支持,所以不应该依赖它。

答案 1 :(得分: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对非屏幕阅读器用户毫无用处。