使用CSS来隐藏部分链接文本_20161207

原文地址


说明

该技巧的目的是添加额外文本来补充链接文本描述链接的唯一功能,并且额外文本不会被支持CSS的用户代理在屏幕上渲染。当在上下文环境中需要信息来解释显示的链接文本,该技巧提供了一个链接输入功能的完全描述,当不允许显示完全文本的时候。

该技巧通过接创建一个CSS选择器来隐藏需要隐藏的目标链接。选择器的规则设置是将文本放置在一个溢出隐藏的1像素框中,并将文本放置在视窗外。这保证文本不会显示在屏幕上,但是仍可被辅助技术访问,例如屏幕阅读器。注意该技巧不能使用visibility:hiddendisplay:none属性,因为这些属性可能对屏幕阅读器造成不可知的影响。

注意1:该技巧被某些屏幕阅读器用户和开发者用户。该技巧在某些网站中有效。其他屏幕阅读器用户和无障碍专家并不建议该技巧作为一个普适技巧,因为这会导致冗余并限制有经验屏幕阅读器用户控制冗余的能力。工作组相信该技巧对web页面有效,在隐藏文本区域不包含重复内容。

注意2:该技巧可以和样式开关技巧配合使用,例如“使用样式开发来提供正确替代版本”和“正确理解替代版本”。


样例

以下样式使用的CSS选择器和规则设置如下:


样例1:

该样例描述一个新的网站,该网站包含一些故事的简短概要,后面跟着一个链接“完全故事”。隐藏链接文本描述链接目的。


效果

Washington has announced plans to stimulate economic growth. Washington stimulates economic growth 完全故事

样例2:

该样例描述一个具有不同格式电子书的资源。每一个书的标签后跟随一个链接“HTML”或“PDF”。隐藏文本描述每一个链接目的。


效果