标签归档:图像链接

创建高可访问性的图像链接

俗话说:一图胜千言。在屏幕空间有限的互联网上更是如此,图像可以让用户快速了解一篇文章内容的概要、一个新产品的魅力或一组数据的概要。图像也可以用来精细控制排版和设计。互联网用户倾向于点击图像,因为它们通常与链接关联。问题就在于此。在视觉上,图像代表了链接的目的,但你怎能保证链接对视觉障碍用户同样是可用的呢?

空的ALT属性会产生不好的体验

假设我们有一个链接,只包含一个图像。如果图像没有可用的替代文字,你会怎么做?(根据以前的指导原则)为了可访问,您必须包含一个alt属性。但是,简单地增加一个空的 ALT属性同样是不好的,图片的ALT属性必须要反映出链接的目的。

这个例子是一个打扮的像厨师的猫咪的图像。假设我们无法获得图像的title、目标网页的title、标题或图像的其他具体标题。当图像只有一个空的ALT属性时,会发生什么?

<a href="http://www.flickr.com/photos/draket/226893468/">
<img src="/226893468_53c604dc77_m.jpg" alt="" />
</a>

屏幕阅读器为了让用户了解链接的目的,它会读取链接的URL:“226893468”。这不是一个好的体验。

解决方案:添加一个通用的Alt文字

如果你不能为图像添加一个特定的alt文本,至少可以使用通用的文字来描述链接的目的。

<a href="http://www.flickr.com/photos/draket/226893468/">
<img src="/226893468_53c604dc77_m.jpg" alt="See this image on Flickr" />
</a>

链接中增强文本的图像

继续阅读创建高可访问性的图像链接