提供链接文本为锚元素描述链接目的_20161013

原文地址


说明

该技巧的目的是通过提供描述性文本作为a元素的内容描述链接的目的。该描述让用户能够将该链接与页面上其他链接区分,并帮助用户判定应该选择哪个链接。目的地的URL一般情况下不能充分描述其目的。

当一个链接的内容只有图片,图片的替代文本描述链接的功能。

当链接内容包含文本和多个图片,如果文本能够充分描述链接目的,图片可以有一个空的替代文本。当图片传递的信息超出了链接目的,必须有适当的alt文本。


样例

样例1:

在HTML中使用a元素的文本内容描述链接目的。


效果

样例2:

使用imgalt属性描述一个地图链接的目的。


效果

样例3:

当一个a元素包含内容文本和img元素,将img元素的alt置为空。注意链接文本出现在图像之后。


效果

样例4:

当用户登陆之后,网站允许用户提供商品的反馈,通过在商品详情页面点击“Feedback”链接。其他用户或商品制造商能够为反馈提供回应。当用户反馈的回应可获得时,反馈链接在“Feedback”文本之前展示了一个图标。帮助信息描述该图标为一个包含引号的聊天气泡,并包含该图标作为一个样例。帮助文本中图标的替代文本是“响应接收图标”。相同的替代文本被来在商品详情页面(当回应可获得),允许通过多种模式标识该图标。


效果

样例5:

链接包含文本和图标,并且该图标提供目的地的额外信息。


效果

样例6:

MyCorp公司的年度财务报告在公司网站上能够找到pdf版本,并且年度预算在公司网站上能够找到excel版本。

注意:很多用户在使用新应用打开一个文件时,想要知道文件类型,所以包含文件类型被认为是有用的。


效果

样例7:

在HTML5中使用一个链接包含块级别元素。


在线样例