リンクとキーボードナビゲーションの周りの点線の境界線

誰もがそれが何であるかを知っていると思います。 一部のブラウザ、特にFirefoxおよびInternet Explorer 8では、ユーザーがリンクをクリックしたときに、リンクとボタンの内側に1ピクセルの点線の境界線が描画されます。 サイトがむき出しのhtmlで構成されている場合、ほとんどの場合、不快感は生じません。 しかし、すべてのリンクが何らかの形で様式化されている場合、あなた(またはあなたのデザイナー)はおそらくこれを取り除きたいでしょう。 さらに、このフレームは間違った場所に表示される場合があります。



画像



このフレームはアウトラインのcss-propertyにすぎないため、このフレームをリンクで無効にする最も最初で最も頻繁に推奨される方法は、単純なcss-ruleを指定することです。

  a:フォーカス{
アウトライン:なし;
 } 
またはこれでさえ:

  {
アウトライン:なし;
 } 


しかし、ご想像のとおり、このフレームはアクティブな要素へのフォーカスを示しているため、単純に削除することはできません。 マウスで作業する場合、この関数はまったく役に立たないように見えるかもしれません。したがって、アクティブな要素がカーソルの下にあることは明らかです。 ただし、キーボードから移動する場合、このフレームにより、どの要素に現在フォーカスがあるかがわかります。 FirefoxおよびIE8で上記のルールを適用する場合、リンクはタブキーでクロールされますが、どのリンクが強調表示されているかを理解することはできません。



他のシステムは、他の動作パターンを実装しています。 私が注意したい最初のアプローチは、Windows XP以降の標準的な動作です-デフォルトでは、コントローラーに焦点が当てられていません。 ただし、初めてTabキーを押すと、フォーカスが表示されて消えなくなります。 同じ動作はInternet Explorer 6および7ブラウザーの特徴であり、Operaのアプローチは異なります。 彼女は、タブキーを使用してリンクを移動する必要はないと考え、フォームコントロールのみに焦点を合わせます。 また、リンクを使用すると、他のメカニズム(Shift +矢印またはControl +矢印)を使用してナビゲーションを行うことができます。 このアプローチでは、リンクのcssアウトラインプロパティは重要ではありません。



Operaの動作を実現することはほとんど不可能であり、必要ではないことは明らかです。これらのブラウザのユーザーにとっては珍しいことです。 ただし、Internet Explorer 6および7の動作をエミュレートすることはできます。 これを行うには、焦点を合わせるためだけでなく、押すときに直接フレームを削除します。 ご存知のように、:focus擬似クラスに加えて、もう1つ-:activeがあります。 mousedownイベントとmouseupイベント間のリンクの状態を担当します。 同じアウトライン(なし)を使用すると、マウスでクリックした時点でフレームは表示されません。 ただし、リンクがフォーカスされるため、リリース後すぐに表示されます。 これは、誘導された要素のフレームを削除することで解決できます。 コードは次のようになります。

  a:アクティブ、a:ホバー{
アウトライン:なし;
 } 


この方法は、OperaソフトウェアのWebエバンジェリストであるPatrick H. Lauke(Pepelsbey、こんにちは!)が推奨しています。 しかし、それでも2つの不快な瞬間が残ります。フォーカスはまだどこにも行かず、マウスを動かした後に表示されます。 したがって、リンクがjavascriptによって処理され、別のページにつながらない場合は、クリック後にフォーカスをリセットする必要があります。 2番目のポイント-キーボードから移動するとき、マウスをホバーすると、推測されるように、フォーカスが消えます。



フォーカスの動作に関するすべての情報は、1つの表に要約できます。

画像

最後の列に緑色の丸が表示されていないことは良い結果です。



他にできること



この問題の可能な解決策は、点線のフォーカスフレームを完全に放棄し、背景色の変更などを行うことです。 このオプションは、マウスとの対話時にそれほど悪くはないかもしれません。 解決策のマイナス-クイックルックがない場合は、フォーカスされているリンクを特定するだけでは不十分です。



わずかな余談



そのような問題の解決策を探しているときは、風車に苦労しているという感覚を常に感じます。 ブラウザは長い間、独自の特性とユニークな小さなもののエコシステムになっています。 そして、ユーザーは、ブラウザーを選択して、これらのささいなことすべてを選択します。 おそらく最良の解決策は、ユーザーが選択したものを変更しようとするのをあきらめることでしょう。 そして、突然、これらの些細なことの一部がブラウザの大部分のユーザーにとって気に入らない場合、おそらくブラウザで変更する価値がありますか? 件名のxkcdからの画像



All Articles