クリック可能な箇所でa要素を使用しない時に気をつけたい3つのポイント

リンクではない、例えばJavaScriptを埋め込むなどのクリッカブルな箇所でアンカーリンクを使用しない時に気をつけたい3つのポイントを紹介します。

When (and when not to) use an anchor tag?

[ad#ad-2]

下記は各ポイントを意訳したものです。

a要素は、いつ使うべきでしょうか。
私はそれがクリック可能である時に、a要素を気前よく使用していました。しかし、a要素の定義を考えてみると、セマンティックではない使い方をしている場合があるのではないかと思いました。

例えば、Gmailのソースを調べてみると、クリック可能な大部分の箇所はdiv要素を使用しています。これはJavaScriptのイベント用のもので、a要素を使用すべきではないものです。

では、そのa要素を使用しない場合、ユーザーにそれがクリック可能であるように見せるために、どのようにしたらよいでしょうか。

機能的な要素をクリック可能なように見せる3つのポイント

• 「cursor: pointer;」を設定する

  カーソルをポインタにする。

• 「tabindex」を設定する

  キーボードの[Tab]キーでフォーカスできるようにする。

• 「:hover, :focus, :active」を使用する

  ホバー、フォーカス、アクティブ時のスタイルを定義する。

[ad#ad-2]

各挙動は、デモページで確認できます。

デモページ