页面的易用性：为什么要去掉链接周围的虚线框

今天突然发现一个很奇怪的问题，一些专注于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键聚焦到一链接时的新式（不同浏览器中可能不尽相同，但是每个浏览器都有此功能，可见其必要性）

二、更加糟糕的用户体验

用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的触发。