ベストアンサー1
アンカー<a>
要素は、単にコンテンツへの、またはコンテンツからのアンカーです。元々、HTML 仕様では、名前付きアンカー ( <a name="foo">
) とリンク アンカー ( <a href="#foo">
) が許可されていました。
名前付きアンカー形式は、フラグメント識別子が属性の指定に使用されるようになったため、あまり一般的には使用されません[id]
(ただし、下位互換性のために[name]
属性を指定することはできます)。属性のない要素も引き続き有効です<a>
[href]
。
セマンティクスとスタイルに関する限り、<a>
要素は属性を持たない限りリンク ( :link
) ではありません[href]
。この副作用として、属性<a>
を持たない要素は[href]
デフォルトではタブ順序に含まれません。
本当の問題は、<a>
要素だけが の適切な表現であるかどうかです。意味レベルでは、と の<button>
間には明確な違いがあります。link
button
ボタンは、クリックするとアクションが発生するものです。
リンクは、現在のドキュメント内のナビゲーションを変更するボタンです。発生するナビゲーションは、フラグメント識別子 ( ) の場合はドキュメント内を移動すること#foo
、URL ( ) の場合は新しいドキュメントに移動することになります/bar
。
リンクは特殊なタイプのボタンであるため、代替機能を実行するためにアクションがオーバーライドされることがよくあります。一貫性の観点からはアンカーをボタンとして使い続けることは問題ありませんが、意味的には正確ではありません。
<a>
要素 (または<span>
、または<div>
) をボタンとして使用する場合のセマンティクスとアクセシビリティが懸念される場合は、次の属性を追加する必要があります。
<a role="button" tabindex="0" ...>...</a>
ボタンロールは、特定の要素が、基になる要素が持つセマンティクスをオーバーライドしてボタンとして扱われていることをユーザーに伝えます。
および要素<span>
の場合、イベントをトリガーするため<div>
に または の JavaScript キー リスナーを追加することができます。および要素はデフォルトでこれを実行しますが、ボタン以外の要素は実行しません。トリガーを別のキーにバインドする方が理にかなっている場合もあります。たとえば、Web アプリの「ヘルプ」ボタンは にバインドされることがあります。SpaceEnterclick
<a href>
<button>
click
F1