dudo博客

今天突然发现一个很奇怪的问题,一些专注于CSS和XHTML、Web 2.0和Web标准的网站都在探讨如何去掉当鼠标点击时超级链接周围的虚线框(outline)如,outline:none 或者 outline:0。可能有时候默认出现虚线框(outline)会影响美观,但是它的存在必然有它的道理:那就是提高网站的易用性,特别是给使用键盘导航的人带来极大的便利。我们在讨论语义化,易用性的同时却总在做与其背道而驰的事情。

一、虚线框(outline)给键盘导航带来便利

我在阅读文章的时候有个习惯:极少使用鼠标,基本上全部靠键盘。而使用最多的就是Tab键、PageUp、PageDown、Entern还有四个方向键。Tab键用来导航超级链接,可以在不同超级链接之间切换,选中某链接之后直接按Enter进入(现在你就可以使用Tab键在本页上看看效果)。当Tab键聚焦(focus)某链接时这个链接的周围就会出现一个虚线框(outline),代表这个链接已经处于焦点状态,确定即可访问。当然很多人可能会说,使用鼠标多么方便啊,干吗用键盘?在这里我想说几个理由。

  1. 据说有一条道别是否真正的电脑高手的标准就是,是否可以不使用鼠标就可以完成所有操作。(出处已经 不可查,但是可以Google到。)
  2. 有时候我看文章时,右手端着咖啡左手敲动键盘不影响我阅读
  3. 特殊人群的特殊需要
  4. 你的网站不是只给你一个人看的,你不能左右别人怎么使用你的网站。

使用Tab键聚焦到一链接时的新式(不同浏览器中可能不尽相同,但是每个浏览器都有此功能,可见其必要性)
IE中outline的表现

二、更加糟糕的用户体验

用outline:none 或者 outline:0去掉外虚线框,虽然从链接上看不到变化了,但是至少还可以从状态栏里看出链接信息。但是更加糟糕的用户体验是使用JavsScript的onfocus事件,当用户聚焦某链接时,它立即取消该焦点,也就是说你永远也无法聚焦到这个超级链接上,所以如果你不使用鼠标你绝对不可能访问这个页面上的任何一个链接。更有高手开发出了使用JQuery等来去除outline。如果你Google一下“去掉链接虚线”,你会得到几万个结果,看来很多人需要、很多人在研究。但是他的确违背了Web的易用性原则,完全没有考虑到用户体验。

三、可替代的选择

如果你确实觉得觉得出现虚线框会影响美观的话,你完全可以有更好的选择。那就是使用CSS中的:focus 伪类。例如使用

a:focus { background-color:#f00; }
/*或者*/
a:hover, a:focus {text-decoration:underline;}

设置焦点被触发时,链接背景为红色等。当然可以根据需要设计出更加复杂的样式,更可以把focus和hover设置成同样的样式。但是有一点,你不能屏蔽掉focus触发机制。

所以永远也不要去移除超级链接周围的虚线框,至少不能屏蔽掉focus的触发。



共有(6)条评论

minchao 发表于 2009-5-24 at 13:42 #1楼

本来一直想写篇关于outline和作者的观点一致的文章,没想到作者先写了。比我自己准备组织的文章好。
[reply=dudo,2009-05-24 06:44 PM]:) 谢谢 多多指教哦~~~[/reply]

[回复]


青色 发表于 2009-5-24 at 17:39 #2楼

写的不错,有道理!
[reply=dudo,2009-05-24 06:44 PM]谢谢,你的博客很不错[/reply]

[回复]


FXCS 发表于 2009-5-25 at 21:15 #3楼

很多追求所謂WEB標準的人完全本末倒置了 或者說自己都很少體驗自己的做出來的“成果”
虛線并不僅僅鍵盤導航 就如我訪問一些網站 聚個例子 PPS的在線播放電影
連續劇看完后 怎么判斷看到哪集? 我就是靠頁面上還留有的虛線框來判斷(連續劇播放時候我知道PPS軟件的標題欄有提示播放的哪集 但通常來不及看就結束了連續劇 恩 沒片尾曲的壞處嗎。。)

還有就是 去掉虛線框用戶又怎么知道點了哪個連接 特別是連接很多的頁面下

而哪些所謂說這個功能影響美觀的人 估計就是那些把猶如電影院放的頁面超級華麗 宏大的FLASH 或者圖片放首頁

[reply=dudo,2009-05-26 05:13 PM]有同感!我也有这样的经历。
特别是点击链接打开新窗口的网页,原链接上会保留有一个虚线框,这样就很容易知道自己刚才点了哪个链接了[/reply]

[回复]


踏雪残情 发表于 2009-5-27 at 10:31 #4楼

博主的此篇文章加深了我对键盘的认识,"易用性"三个字让我感受颇深!

[回复]


龙子 发表于 2009-5-27 at 22:10 #5楼

很好的一篇文章!
但是,虚线框有时确实影响页面美观。具体情况,具体分析吧!

[回复]


css教程 发表于 2010-6-16 at 00:22 #6楼

不错 很详细

[回复]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量