ボタンとリンクの違い

ボタンとリンクの違い 2026年7月28日 Triptych Projectの3つの提案の中で、HTMLに小さくも強力な機能を追加するための私の長年の探求において、最も多くの質問を生むのはButton Actionsです。提案自体は非常に単純です。button要素にaction属性とmethod属性を追加したいのです。 <button action="/begin" method="GET">Start</button> Button Actionsは非常にシンプルなプリミティブであるため、人々はしばしばなぜそれが必要なのかを尋ねます。その答えは、ウェブユーザーが直感的に理解しているものの、直接考える必要はめったにない区別、つまりボタンとリンクの違いにあります。私は提案に詳細な「ボタン対リンク」セクションを追加しましたが、既存の説明の多くが的外れであるため、ブログ形式の説明にも値すると考えています。 ボタンには固定されたコンテキストがあります リンクは目的地を表し、ボタンはアクションを表します。機能的には、これはリンクがユーザーにコンテキストをどのように開くかを制御させることを意味し、ボタンはそうではありません。ウェブブラウザは、リンクのコンテキストを再設定するための無数のアフォーダンスを提供します。リンクをクリックまたはタップすると、現在のページがその目的地にナビゲートされます。マウスユーザーはリンクをミドルクリックして新しいタブで開いたり、リンクの上にカーソルを置いてどこへ行くかを確認したりできます。コンテキストメニュー（デスクトップでは右クリック、モバイルでは長押し）には、リンク固有の多くのオプションがあります。ウェブユーザーは、リンクに伴う機能に非常に慣れています。それらを開く方法、コピーする方法、ブックマークする方法、友人と共有する方法、そして不適切に多くのブラウザタブで維持する方法を知っています。リンクのセマンティクス、つまりそれらが独立してナビゲート可能な目的地を表すという考え方は、ブラウザがこれらのすべての機能を構築することを可能にします。ハイパーリンクはブラウザタブの発明よりも前に存在しましたが、ブラウザがタブを追加したとき、ウェブサイトはそれらをサポートするために何もする必要はありませんでした。リンクは再コンテキスト化できる目的地を表していたため、ブラウザは単にそれらを開くための新しいコンテキストを発明できました。すべてのウェブサイトが、巨大な新機能で瞬時にアップグレードされました。 ボタンにはこれらの機能がありません。デフォルトでは、ミドルクリック、コントロールクリック、または追加情報のためにホバーすることはできません。リンクのhrefをコピーできるのと同じように、ボタンはそれらのアクションをコピーすることを許可しません。それらのコンテキストメニューには、アクションを保存したり、別の場所で実行したりするためのアフォーダンスは含まれていません。これらは省略ではなく、ボタンのセマンティクスに基づいた意図的な選択です。ボタンは特定のブラウジングコンテキスト（ほとんどの場合、現在のコンテキスト）内でアクションをトリガーします。コピー、共有、ブックマークなどはすべて、リンクのアクションを再コンテキスト化するための機能です。ボタンはそれらのどれも許可しないため、補完的な目的を果たします。 いつボタンはナビゲートすべきか？ 一般的な誤解は、リンクはページナビゲーション用で、ボタンはそれ以外のすべて用であるというものです。これは両方とも誤りです。ボタンは定期的にナビゲーションを実行します。ログアウトボタンをクリックすると、現在のページがログアウトされたページにナビゲートされます。検索ボタンをクリックすると、現在のページがクエリ結果にナビゲートされます。そしてリンクは、ナビゲーションをトリガーしない状況でよく使用されます。相対リンクは現在のページ内をジャンプできます。mailtoリンクはメールクライアントを開くことができます。ダウンロードリンクはファイルをコンピュータに保存できます。これらのどれもナビゲーションではありませんが、すべてカスタマイズ可能な方法で開いたり、保存したり、共有したりできる「目的地」です。 ナビゲーションは、そのアクションが再コンテキスト化できない（ブックマーク、共有、ミドルクリックなど）固定されたコンテキストで発生する場合、ボタンとして表されるべきです。これが頻繁に発生する場所の1つは、保存済みのもの（ウェブサイトのコメントなど）を編集できるフォームです。編集をクリックすると、ウェブサイトは編集可能なテキストエリアと次のようなオプションを表示します。 I had a great day today! Save Save as draft Cancel Delete ユーザーは各ボタンが何をするかを容易に理解するでしょう。「Save」は<textarea>の内容でコメントを更新します。「Save Draft」は公開せずに<textarea>の内容を保存します。「Cancel」は編集ビューを閉じます。「Delete」はコメントを完全に削除します。 「Cancel」はリンクであるべきか？いいえ！その仕事は編集ビューを閉じることです。これをリンクにすると、その目的（視覚的にもその他でも）を誤って伝達するだけでなく、ブックマークやミドルクリックなど、不適切な動作をする多くの機能をフォーム「コントロール」に負担させます。これらのボタンは多くのもっともらしい方法で実装できますが、それらの実装のどれもユーザーにリンクとして提示されるべきではありません。 Button Actionsはどのようなギャップを埋めるか？ Button Actionsを使用すると、このUI全体をHTMLだけで実装できます。 <form action="/comments/123" method="POST"> <textarea name="content">I had a great day today!</textarea> <button>Save</button> <button formaction="/comments/123/draft">Save Draft</button> <button action="/comments/123" method="GET">Cancel</button> <button action="/comments/123" method="DELETE">Delete</button> </form> 最初の2つのボタンは既存のHTML機能を使用しており、2番目の2つのボタンはButton Actionsによって可能になります。（TriptychのDELETEサポートも利用していますが、URLメソッドハックなしでも可能です。） <button action="/" method="GET">Cancel</button> <button action="/comments/123" method="DELETE">Delete</button> 哲学的には、Button Actionsはネットワークリクエストで現在のコンテキストを再描画できる汎用的なコントロールを作成します。ボタンはすでに特定の制限の下でこれを行う能力を持っています。この提案はその制限を解除します。実際には、これによりウェブ著者は状態遷移をビューにナビゲートすることで実装できます。これらのビューは、スタンドアロンの目的地としてすでに存在する可能性もあり、その場合、著者は既存のルートを簡単に再利用しながら、UIでアクションを正しく表現できます。これはHTMLが奨励すべき素晴らしいパターンです！ 残念ながら、Button Actionsがない場合、このボタンを誤ってリンクにするのが、スクリプトなしでこのインターフェースを実装する唯一の方法です。 <form action="/comments/123" method="POST"> <textarea name="content">I had a great day today!</textarea> <button>Save</button> <button formaction="/comments/123/draft">Save Draft</button> <a href="/comments/123" class="button">Cancel</a> <button action="/comments/123" method="DELETE">Delete</button> </form> これは明らかにアンチパターンですが、主要なデザインシステムによってサポートされているアンチパターンです。なぜなら、ボタンはフォームなしで基本的なナビゲーションを実行する能力を欠いているからです。JavaScriptなしで動作するウェブサイト（英国政府のサイトの要件）を構築する場合、リンクが唯一の選択肢です。US Web Design System (USWDS) には、それに対する公式なアフォーダンスさえ含まれています。「usa-button」クラスをリンクに追加すると、ボタンのように見えます。しかし、リンクをボタンのように見せても、リンクがボタンのように動作するわけではありません。USWDSはJavaScriptを使用してスペースバーでのアクティベーションを実装していますが、JavaScriptは、コンテキストメニューなど、ボタンとリンクを区別する他の無数の動作には何もできません。リンク（role=buttonを持つものを含む）は、リーダーモードやその他のカスタムビューではリンクのように見えます。 これはHTMLセマンティクスに違反することの根本的な結果です。著者は人々がウェブページと対話するすべての異なる方法を考慮することは不可能であるため、ページは一部のユーザーにとって壊れます。著者がそれらすべてを考慮しなければならないとしたら、ウェブは機能しないでしょう。ナビゲーションはウェブ著者がユーザーエクスペリエンスを制御するために持つ最も広範なツールです。HTMLは、それらを開始する<button>の能力を完了するだけでよいのです。そうすることで、ウェブはすべての人にとってよりシンプル、安全、そしてアクセスしやすくなります。 この取り組みをサポートしたい場合は、GitHubのButton Actionsイシューに「いいね！」を付けて、提案があなたにとって価値がある理由の例を共有するのが最善の方法です。ノート この提案をサポートしてくれたThe Django Software Foundationに大いに感謝します！現在、Button Actionsが既存のウェブサイトに新たなXSS脆弱性を導入しないことを示す分析に取り組んでいます。サポート thi