hrefのないアンカーというアンチパターン

よくあるアンチパターンは、hrefのないanchorにクリックハンドラーを設定し、ボタンのように動作させることです。見た目は問題なくても、さまざまな機能が壊れます。

anchorが本物のリンクとして扱われるのは、hrefがある場合だけです。hrefがなければ、ブラウザーはそれをインタラクティブな要素として扱いません。

hrefのないanchorにはフォーカスを移せません。そのため、キーボードでページをTab移動するユーザーはその要素を飛ばしてしまい、決して到達できません。

無理にフォーカスを移しても、偽のlinkは標準ではEnterやSpaceに反応しません。そのため、キーボードユーザーは操作できないままです。

hrefがないと、スクリーンリーダーはanchorをリンクとして読み上げない場合があります。そのため、ユーザーは操作できる要素だと知ることができません。

hrefにハッシュだけを指定して対処する人もいます。これでフォーカスは可能になりますが、ページが先頭へ移動するため、違和感のある動作になります。

コントロールが操作を実行するものなら、本物のbuttonを使います。フォーカス、キーボード対応、正しい役割を標準で得られます。

コントロールが実際に移動を行うなら、anchorを使い続け、移動先を指す本物のhrefを指定します。

開発者が下線のスタイルを理由にanchorを選ぶことはよくあります。しかし、アクセシビリティを損なわずにbuttonをスタイル設定することもできます。

hrefのないanchorは、標準ではポインターカーソルも表示されません。そのため、視覚のあるユーザーにも、そこは本当にクリックできる場所ではないと伝わります。

インタラクティブな要素を偽装しないでください。操作には本物のbuttonを、移動にはhrefを持つanchorを使い、回避策は避けます。

hrefのないanchorは偽のリンクであり、フォーカスできず、キーボードでも操作できません。操作にはbutton、移動には本物のhrefを使います。✅