振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
網頁是否應該去掉連結周圍虛線框?
2010/04/19
網頁是否應該去掉連結周圍虛線框?

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

 

最後更新 ( 2010/04/19 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇