今天突然发觉一个很奇怪的疑问，一些专注于CSS和XHTML、Web 2.0和Web标准的站点都在探讨如何 去掉当鼠标点击时超级链接周围的虚线框（outline）如，outline:none 或者 outline:0。可能有时候默认出现虚线框（outline）会影响美观，但是它的存在必然有它的道理：那就是提高站点的易用性，特别是给运用键盘导航的人带来极大的便利。我们在讨论语义化，易用性的同时却总在做与其背道而驰的事情。
一、虚线框（outline）给键盘导航带来便利
我在阅读文章的时候有个习惯：极少运用鼠标，基本上全部靠键盘。而运用最多的就是Tab键、PageUp、PageDown、Entern还有四个方向键。Tab键用来导航超级链接，可以在不同超级链接之间切换，选中某链接之后直接按Enter进入（现在你就可以运用 Tab键在本页上看看效果）。当Tab键聚焦（focus）某链接时这个链接的周围就会出现一个虚线框（outline），代表这个链接已经处于焦点状态，确定即可访问。当然很多人可能会说，运用鼠标多么方便啊，干吗用键盘？在这里我想说多个理由。
据说有一条道别能不能真实的计算机老手的标准就是，能不能可以不运用鼠标就可以完成所有操作。有时候我看文章时，右手端着咖啡左手敲动键盘不影响我阅读。
特殊人群的特殊须要，你的站点不是只给你一个人看的，你不能左右别人如何运用你的站点。
运用 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的触发

（转载自：http://www.lbchh.cn/?p=287

标签: none

添加新评论