今天突然發現一個很奇怪的問題，一些專注於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的觸發