HTML5でリンクのように機能するボタンを作成する方法は？

JavaScriptのWindocy.Locationメソッドを使用して、オンクリックイベントをボタンジャンプしますが、ネイティブリンクのアクセシビリティと右クリック関数がありません。 2。<a>タグをCSSスタイルのボタンの外観に美化することがベストプラクティスであり、完全なリンク動作を保持し、迅速な操作と明確なセマンティクスをサポートします。 3.フォーメーション属性を備えたフォームボタンを使用すると、ジャンプを実現することができますが、フォーム送信メカニズムに依存すると、新しいタブの開くのをサポートするのは簡単ではありません。 4. JavaScriptボタンを使用する必要がある場合、アクセシビリティを改善するためにロール= "リンク"とキーボードイベントを追加する必要がありますが、コードはより複雑です。セマンティクスは正しい、実装が簡単で、すべてのリンク関数と互換性があり、ボタンセマンティクスが必要な場合に他のソリューションが考慮されるため、スタイルのスタイルの使用を優先することをお勧めします。

ニーズに応じて、ナビゲーション、アクセシビリティ、スタイリングのために、HTML5のリンクのように機能するボタンをいくつかの異なる方法で作成できます。ここに最も一般的で効果的なアプローチがあります：

1。Window.location window.location使用してJavaScriptを使用します

これは最も簡単な方法です。ページの場所を変更する<button></button>にonclickイベントを添付します。

 <button onclick = "window.location.href = &#39;https：//example.com&#39;">
  例に移動します
</button>

長所：

• 見た目も振る舞いもボタンのように動作します
• CSSで完全にカスタマイズされています
• フォームは必要ありません

短所：

• 本質的にアクセスできない（スクリーンリーダーはそれをリンクとして扱うことはできないかもしれません）
• CTRLをクリックするか、右クリックして→「新しいタブで開く」という新しいタブで開きません

2。ボタンのように見えるように<a>タグをスタイリングする

ボタンをリンクのように動作させる代わりに、リンクをボタンのように見せます。多くの場合、これはより良いセマンティックの選択です。

 <a href = "https://example.com" class = "button-link">例</a>に進みます

CSSで：

 .button-link {
  ディスプレイ：インラインブロック。
  パディング：10px 15px;
  バックグラウンドカラー：＃007bff;
  色：白;
  テキスト装置：なし;
  ボーダーラジウス：4px;
  境界線：1pxソリッド＃0056b3;
  フォントファミリー：sans-serif;
}

.button-link：Hover {
  バックグラウンドカラー：＃0056B3;
}

長所：

• フルリンク動作（Ctrlクリック、右クリックなど）
• アクセス可能でセマンティック
• スタイルが簡単です

短所：

• ボタンのように見えるようにCSSが必要です

この方法は、ネイティブリンク機能を保持するため、アクセシビリティの専門家によって多くの場合推奨されます。

3. formactionのあるフォーム内のボタンを使用します

わずかなリダイレクト動作で大丈夫なら、ダミーフォーム内のボタンを使用できます。

 <form action = "https://example.com">
  <button type = "submit"> </button>に移動します
</form>

またはより多くの制御のためのformactionで：

 <form>
  <button type = "submit" format = "https://example.com">例に移動</button>
</form>

長所：

• ネイティブHTMLフォームの提出を使用します
• JavaScriptなしで動作します

短所：

• フルページのロード（リンクのような）をトリガーしますが、フォームの提出を介して
• すべてのリンクインタラクションをサポートしない場合があります（新しいタブで簡単に開くなど）

4。アリアによるアクセシビリティの強化（JavaScriptメソッドを使用している場合）

JavaScriptボタンアプローチを使用してアクセシビリティを改善したい場合：

 <button onclick = "window.location.href = &#39;https：//example.com&#39;"
        役割= "link"
        tabindex = "0">
  例に移動します
</button>

Enter/Spaceのキーイベントサポートを追加することもできます。

 <ボタン 
  onclick = "window.location.href = &#39;https：//example.com&#39;"
  onkeydown = "if（event.key === &#39;enter&#39;）windoca.location.href = &#39;https：//example.com&#39;"
  役割= "link"
  tabindex = "0">
  例に移動します
</button>

しかし、これは乱雑になります - 別の方法で、ボタンスタイルを使用して<a>を使用するだけでクリーンです。

おすすめ

ベストプラクティス：スタイルの<a>タグ（方法2）を使用します。
セマンティックでアクセスしやすく、すべてのネイティブリンクの動作をサポートし、スタイルが簡単です。

ボタンセマンティクスが絶対に必要なコンテキスト（たとえば、提出を望まない複雑なフォーム内）にある場合のみ、アクセシビリティまたはリンク機能を犠牲にしても大丈夫な場合のみです。

基本的に、リンクが必要な場合は、リンクを使用してください。ボタンのように見せてください。

以上がHTML5でリンクのように機能するボタンを作成する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。