<button>: ボタン要素

この要素にはグローバル属性があります。

autofocus

論理属性で、ページ読み込み時にこのボタンが入力フォーカスを持つべきであることを指定します。この属性を設定することができるのは、文書中の要素一つだけです。

command

制御ボタンの <button> によって制御される、 commandfor 属性で指定した要素に対して実行するアクションを指定します。実現可能な値は次のとおりです。

"show-modal"

このボタンは、 <dialog> をモーダルとして表示させます。ダイアログがすでにモーダルである場合は、何もしません。これは、ダイアログ要素で .showModal() メソッドを呼び出すことと同じ意味の宣言的な方法です。

"close"

このボタンは、 <dialog> 要素を閉じます。ダイアログがすでに閉じられている場合、何もしません。これは、ダイアログ要素の .close() メソッドを呼び出すことと同じ意味の宣言的な方法です。

"request-close"

このボタンは、 <dialog> 要素を閉じるよう要求します。ダイアログがすでに閉じられている場合、何もしません。これは、ダイアログ要素の .requestClose() メソッドを呼び出すことと同じ意味の宣言的な方法です。

"show-popover"

このボタンは、非表示のポップオーバーを表示します。すでに表示されているポップオーバーを表示しようとすると、何もしません。詳細については、ポップオーバー API を参照してください。これは、値 "show" を指定して popovertargetaction を呼び出すことと同じです。これは、ポップオーバー要素の .showPopover() メソッドを呼び出すことと同じ意味の宣言的な方法です。

"hide-popover"

このボタンは、表示されているポップオーバーを非表示にします。すでに非表示になっているポップオーバーを非表示にしようとすると、何もしません。詳細については、ポップオーバー API を参照してください。これは、値 "hide" を指定して popovertargetaction を呼び出すことと同じです。これは、ポップオーバー要素で .hidePopover() メソッドを呼び出すことと同じ意味の宣言的な方法です。

"toggle-popover"

このボタンは、ポップオーバーの表示と非表示を切り替えます。ポップオーバーが非表示の場合は表示され、ポップオーバーが表示されている場合は非表示になります。詳細については、ポップオーバー API を参照してください。これは、値 "toggle" を指定した popovertargetaction と同じです。これは、ポップオーバー要素の .togglePopover() メソッドを呼び出すことと同じ意味の宣言的な方法です。

カスタム値

この属性は、 2 つのハイフン文字 (--) を接頭辞として付加したカスタム値を表します。カスタム値を持つボタンは、制御される要素で CommandEvent を配信します。

commandfor

<button> 要素をコマンドボタンに変え、指定された対話要素を制御します。制御する要素の ID をその値として取ります。これは popovertarget のより一般的なバージョンです。

disabled

これは論理属性で、ユーザーがボタンを操作することを抑止します。押したりフォーカスを受けたりすることができなくなります。

form

ボタンに関連付けられた <form> 要素（フォームオーナー）です。この属性の値は、同一文書内の <form> 要素の id 属性と同一でなければなりません。（この属性を設定しなかった場合、 <button> は祖先に <form> 要素が存在すれば、その要素に関連付けられます。）

この属性によって <button> 要素が <form> の中になくても、同一文書内にある任意の <form> 要素に関連付けることが可能になりました。また、祖先の <form> 要素を上書きすることができます。

formaction

このボタンによって送信された情報を処理する URL です。このボタンのフォームオーナーの action 属性よりも優先されます。フォームオーナーがない場合は何もしません。

formenctype

このボタンが送信ボタンである場合（<form> の中にあるか関連付けられており、 type="button" が設定されていない場合）、送信されるフォームデータのエンコード方法を指定します。指定可能な値は以下の通りです。

• application/x-www-form-urlencoded: この属性が使用されなかった場合の既定値。
• multipart/form-data: <input> 要素の type 属性に file を指定して使用する場合に使用します。
• text/plain: デバッグ目的で指定されるものです。実際のフォーム送信で使用すべきではありません。

この属性が指定された場合、そのボタンのフォームオーナーの enctype 属性より優先されます。

formmethod

このボタンが送信ボタンである場合（<form> の中にあるか関連付けられており、 type="button" が設定されていない場合）、この属性はこのフォームを送信するのに使用される HTTP メソッドを指定します。指定可能な値は以下の通りです。

• post: フォームのデータは、サーバーへ送信する際に HTTP リクエストの本文に含められます。フォームにパスワードなどの公開するべきではない情報が含まれている場合は、このメソッドを使用してください。
• get: フォームのデータは、フォームの action の URL に、セパレーターとして '?' を使用して追加され、その結果となる URL をサーバーへ送信します。検索フォームのように、まったく副作用がない場合にのみ、このメソッドを使用してください。
• dialog: このメソッドは、ボタンが関連付けられたダイアログを閉じ、フォームデータをまったく送信しないことを示すために使用します。

指定された場合、この属性はボタンのフォームオーナーの method 属性より優先して使用されます。

formnovalidate

論理属性で、ボタンが送信ボタンである場合に、フォームデータ送信時に内容を検証しないように指定するものです。この属性が指定された場合、ボタンの属するフォームオーナーの novalidate 属性より優先して使用されます。

この属性は <input type="image"> および <input type="submit"> 要素でも使用できます。

formtarget

ボタンが送信ボタンである場合、フォームの送信後に受信するレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードです。これは、閲覧コンテキスト（タブ、ウィンドウ、<iframe>）の name またはそれを表すキーワードです。この属性が指定された場合、ボタンのフォームオーナーの target 属性より優先されます。以下のキーワードは特別な意味を持ちます。

• _self: レスポンスを同じ閲覧コンテキストに読み込みます。これは、属性が指定されていない場合の既定値です。
• _blank: レスポンスを新しい無名の閲覧コンテキスト — 普通は、ブラウザーの設定に従い、新しいタブまたはウィンドウ — に読み込みます。
• _parent: レスポンスを現在のコンテキストの親の閲覧コンテキストに読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
• _top: レスポンスを最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以前の祖先をもたない閲覧コンテキスト) に読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。

name

このボタンの名前で、フォームデータの一部としてこのボタンの value との組み合わせで送信されます。

popovertarget

<button> 要素をポップオーバーの制御ボタンに変換します。制御するポップオーバー要素の ID を値として受け取ります。 popovertarget 属性を使用してポップオーバーとその呼び出し元ボタンとの関連付けを設定すると、2 つの有益な効果が追加されます。

• ブラウザーは、ポップオーバーと呼び出し元との間に暗黙の aria-details および aria-expanded の関係を作成し、ポップオーバーが表示されたときに、キーボードフォーカスナビゲーションの順序で論理的な位置にポップオーバーを配置します。これにより、キーボードおよび支援技術 (AT) のユーザーもポップオーバーにアクセスしやすくなります （「ポップオーバーのアクセシビリティ機能」も参照してください）。
• ブラウザーは、2 つの間に暗黙のアンカー参照を作成するため、CSS アンカー位置指定を使用して、コントロールを基準にしてポップオーバーを相対的に位置指定することがとても便利です。詳細については、「ポップオーバーのアンカー位置指定」を参照してください。

popovertargetaction

制御用 <button> によって制御されているポップオーバー要素に対して実行される動作を指定します。使用可能な値は以下の通りです。

"hide"

このボタンは、表示されているポップオーバーを非表示にします。非表示になっているポップオーバーを非表示にしようとした場合、何も行われません。

"show"

このボタンは、非表示のポップオーバーを表示します。すでに表示されているポップオーバーを表示しようとしても、何の動作も起こりません。

"toggle"

ポップオーバーの表示・非表示を切り替えるボタンです。ポップオーバーが非表示の場合は表示され、ポップオーバーが表示されている場合は非表示になります。popovertargetaction が省略された場合、"toggle" がこのコントロールボタンによって実行される既定の動作です。

type

このボタンの既定の動作です。以下の値が指定可能です。

• submit: このボタンはフォームのデータをサーバーへ送信します。これはこの属性が <form> に関連付けられたボタンに指定されていない場合、またはこの属性が空であったり不正な値であったりした場合の既定値です。
• reset: このボタンはすべてのコントロールを初期値に初期化します。 <input type="reset"> と同様です。 (この動作はユーザーを困らせる傾向があります。)
• button: ボタンには既定の動作がなく、既定では押されても何も行いません。この要素のイベントを待ち受けし、イベントが発生すると起動されるクライアント側スクリプトを設定することができます。

value

フォームのデータと一緒に送信される際に、ボタンの name に結び付けられる値を定義します。この値は、フォームに送信する際にサーバーに引数として渡されます。

送信ボタンに formaction 属性が設定されていても、関連付けられたフォームがない場合は何もしません。ボタンを <form> で囲むか、 form でフォームの id を設定するかしてフォームオーナーを設定する必要があります。

<button> 要素は <input> 要素よりもずっと簡単にスタイル付けできます。内部に HTML コンテンツを（<i>、 <br> や <img> さえも）追加できますし、複雑な描画のために ::after や ::before 擬似要素を使用することもできます。

ボタンがサーバーにデータを送信するためのものでない場合は、 type 属性を button に設定することを忘れないでください。さもないと、フォームデータを送信して（存在しない）レスポンスを読み込み、文書の現在の状態を破棄してしまうおそれがあります。

<button type="button"> には既定の動作がありませんが、イベントハンドラーを記述して動作を起動することができます。起動されたボタンは JavaScript を用いてプログラム可能なアクションを実行することができます。例えばアイテムをリストから削除するなどです。

既定では、ユーザーエージェントはボタンを display: flow-root としてスタイル設定します。これにより、新しいブロック整形コンテキストが確立され、ボタンがオーバーフローしない限り、ボタンの中の子要素が水平方向と垂直方向の両方で中央に配置されます。ボタンがフレックスまたはグリッドコンテナーとして定義されている場合、子要素はフレックスまたはグリッドアイテムとして動作します。 display: inline に設定されたボタンは、値が display: inline-block に設定されているかのようにスタイル設定されます。

アイコンのみを使って機能を表現するボタンは、アクセシブル名を持ちません。アクセシブル名はスクリーンリーダーのような支援技術で文書を解析し、アクセシビリティツリーを生成するときに、アクセスするためのプログラム的なフックを提供します。そのため、支援技術や移動やページコンテンツの操作にアクセシビリティツリーを使用します。

アイコンボタンにアクセシブル名を与えるには、 <button> 要素でボタンの機能を簡潔に説明するテキスト文字列を提供してください。

例

<button name="favorite">
  <svg fill="#000000" viewBox="0 0 42 42">
    <path
      d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,
      3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,
      2.329-14.442c-0.399-1.313-10.3-9.165-9.96-10.252 c0.33-1.084,12.731-1.326,13.791-2.137S19.91,1,21,1z"></path>
  </svg>
  お気に入りに追加
</button>

結果

ボタンのテキストを、アクセス可能な方法で視覚的に隠したい場合は、CSS プロパティの組み合わせを使用して画面から削除し、支援技術からは解析可能のままにします。

しかし、ボタンのテキストを視覚的に見えるようにしておけば、アイコンの意味に慣れていない人がボタンの目的を理解できるようになります。これは特に、技術的に慣れていない人や、アイコンボタンが使用するアイコンの文化的解釈が異なる人に適しています。

• What is an accessible name? | The Paciello Group
• MDN WCAG を理解する ― ガイドライン 4.1 の解説
• Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0

大きさ

ボタンなどの操作可能な要素は、容易にアクティブ化させることができるだけの大きさで提供するようにしてください。これは、動きが不自由な人、スタイラスや指のような正確性の低い形の入力を使用している人など、様々な人に役立ちます。44×44 CSS ピクセル以上の操作のための大きさが推奨されています。

• Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
• Target Size and 2.5.5 | Adrian Roselli
• Quick test: Large touch targets - The A11Y Project

近接性

たくさんの操作可能なコンテンツ — ボタンを含む — が互いに視覚的に接近して配置されるときは、それを隔てるために間隔を置いてください。間隔を置くことは、動きが不自由で誤った操作可能なコンテンツを有効化してしまうことがある人にとって有益です。

間隔は margin などの CSS プロパティを使用して作成することができます。

• Hand tremors and the giant-button-problem - Axess Lab

ボタンの状態を記述するために使用する正しい ARIA 属性は aria-pressed であり、aria-checked や aria-selected ではありません。詳しくは、 ARIA button ロールについての情報をご覧ください。

フォーカスを持つ要素の既定のフォーカスリングは上書きしないことが望ましいです。ボタンスタイルが上書きされる場合、視覚障碍のあるユーザーが認識でき、認知能力に違いのあるユーザーも理解できるように、フォーカス状態のコントラストが十分であることを保証することが重要です。

:focus-visible 擬似クラスを使用すると、ユーザーエージェントのヒューリスティックがフォーカスを強調表示すべきであると判断した場合（たとえば、<button> がキーボードのフォーカスを受け取った場合など）にのみ、 :focus を保有する要素にスタイルを適用することができます。詳細については、:focus と :focus-visible を参照してください。

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、大きめの文字列で 3:1 以上のコントラスト比が求められています。 (大きめの文字列とは、 bold の 18.66px 以上、または 24px 以上と定義されています。)

• WebAIM: Color Contrast Checker
• MDN WCAG を理解する ― ガイドライン 1.4 の解説
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

<button> や <input> のボタン型をクリックしたときに（既定で）フォーカスを得るかは、ブラウザーおよび OS により異なります。多くのブラウザーはクリックされているボタンにフォーカスを与えますが、Safari は設計上そうなりません。