在我的网页上,我有一个锚点(下面的代码),我在视觉上显示为完全隐藏文本的图像(标识)。我想锚点是:
我使用以下方法:
<a href="http://some-institution.com"
title="Some Institution"
class="replace-text-with-image">Some Institution</a>
.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
(“Some Institution”),导致“口吃” title
进行无障碍访问是错误的,应该使用aria-label
。所以我尝试重新分解以同时使用aria-label
和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
属性完全删除锚的内容,但我觉得空锚不是一个特别好的做法,不是吗?该问题的最佳解决方案是什么?我真的很想不起它......
答案 0 :(得分:0)
首先,我真的鼓励你使用最简单的标记,这是一个包裹在图像元素周围的锚元素,如下所示:https://jsfiddle.net/pLuqqh8w/
您应该使用锚元素的title
属性来描述链接的 意图 (即它的去向),然后使用{ {1}}属性用于描述图像的 意图 (即它是什么)。这就是该技术的设计方式。 alt
和alt
属性不应该相同。
话虽如此,如果你真的想要一个屏幕阅读器没有公布的工具提示,我建议你这样做: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
对非屏幕阅读器用户毫无用处。