WEB Tips デザイン・コーディング

リンクの周りの点線(or線)を消す

2015-03-11

リンクの周りの点線(or線)を消す

リンクをクリックしたときにでるまわりの点線?
IEやFirefoxで表示されます。

これを表示させたくない場合は

a{ outline:none; }

とすると消せます。

ただイメージマップ(クリッカブルマップ)のリンクには、スタイルシードだけでは効かなかったような。。。(未確認)
その場合は、アンカーにonfocus属性を追記すると消えます。

<a href="#" onfocus="this.blur()">

リンクの点線を消す問題点

上記のようにリンクの点線を消すことはできますが、tabキーを使ってリンクを移動している人たちにとっては、その点線が見えないとどこを移動しているかわからないのでとても不便だそうです。

Webアクセシビリティの観点からは、どんな環境、どんな人でもアクセスしやすいウェブサイトということが重要です。

なのでリンクであることがわかるこの点線は消さないほうが良いということになります。

アクセシビリティを保ちつつ、点線を消すには

aタグのfocus属性にリンクであるとわかるstyleを適用します。以下のサンプルはaタグのアンダーラインとアウトラインを消し、hoverとfocusされた際にアンダーラインを適用しました。

a{
			text-decoration:none;
			outline:none;
}
a:hover,
a:focus{
			text-decoration: underline;
		}

-WEB Tips, デザイン・コーディング
-