今日、非常に奇妙な問題を突然発見しました。CSS、XHTML、Web 2.0、および Web 標準に焦点を当てているいくつかの Web サイトでは、マウスをクリックしたときにハイパーリンクの周囲にある点線のボックス (アウトライン: なし) やアウトライン: を削除する方法について議論しています。 0 。場合によっては、点線フレーム (アウトライン) のデフォルトの外観が外観に影響を与えることもありますが、その存在には理由があるはずです。それは、Web サイトの使いやすさを向上させるため、特にキーボード ナビゲーションを使用するユーザーに大きな利便性をもたらすためです。私たちはセマンティクスや使いやすさについて議論していますが、常にそれらに反することを行っています。
1. 点線のボックス (アウトライン) により、キーボードのナビゲーションが便利になります
私は記事を読むときの癖があって、マウスをほとんど使わず、基本的にキーボードに頼っています。最もよく使用されるキーは、Tab キー、PageUp、PageDown、Enter、および 4 方向キーです。 Tab キーは、ハイパーリンクを移動するために使用されます。リンクを選択した後、Enter キーを直接押して切り替えることができます (このページでの効果を確認するには、Tab キーを使用します)。 Tab キーでリンクにフォーカスすると、リンクの周囲に点線の枠（輪郭）が表示され、リンクがフォーカスされていることを示し、確認後にアクセスできるようになります。もちろん、マウスを使うのはとても便利なのに、なぜキーボードを使うの?と言う人も多いでしょう。ここではその理由をいくつか挙げてみたいと思います。
真のコンピュータマスターの基準の一つは、マウスを使わずにすべての操作を完了できるかどうかであると言われています。記事を読んでいるときに、右手にコーヒーを持ち、左手でキーボードをタイプしても、読書に影響しないことがあります。
特別なグループの特別なニーズ。あなたの Web サイトはあなただけのものではありません。他の人があなたの Web サイトをどのように利用するかに影響を与えることはできません。
Tab キーを使用してリンクにフォーカスするときの新しいスタイル (ブラウザによって異なる場合がありますが、どのブラウザにもこの機能があり、その必要性が示されています)
2. ユーザーエクスペリエンスの悪化
外側の点線の枠を削除するには、outline:none またはoutline:0 を使用します。リンクには変更がありませんが、少なくともステータス バーからリンク情報が表示されます。しかし、さらに悪いユーザー エクスペリエンスは、JavsScript の onfocus イベントを使用することです。ユーザーがリンクにフォーカスすると、すぐにフォーカスがキャンセルされます。つまり、このハイパーリンクにフォーカスすることはできません。したがって、マウスを使用しなければ、絶対にフォーカスできます。このページのリンクにアクセスしてください。一部の専門家は、JQuery を使用してアウトラインを削除する方法を開発しました。 Googleで「リンクから点線を削除」と検索すると何万件もの結果が得られ、多くの人がそれを必要としていて研究しているようです。しかし、彼は Web の使いやすさの原則に違反し、ユーザー エクスペリエンスをまったく考慮していませんでした。
3. 代替オプション
点線フレームの外観が外観に影響を与えると本当に考えている場合は、間違いなくより良い選択があります。それは、CSS で :focus 疑似クラスを使用することです。たとえば、
a:focus {背景色:#f00}
/*または*/
a:hover、a:focus {text-decoration:underline;}
フォーカスがトリガーされると、リンクの背景が赤になります。もちろん、必要に応じてより複雑なスタイルをデザインしたり、フォーカスとホバーを同じスタイルに設定したりすることもできます。ただし、フォーカス トリガー メカニズムをブロックできないことが 1 つあります。
したがって、少なくともフォーカスのトリガーを妨げないように、ハイパーリンクの周囲の点線のボックスは決して削除しないでください。