diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-05-01 01:16:27 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-05-01 01:16:27 +0900 |
| commit | c78513fe06939851419aeb549c227730c8228fd7 (patch) | |
| tree | 5e17c22ae265cb2dfaa23ee271336b418c308c63 /files/ja/web/html | |
| parent | 71c618f2ea793f0462948cfd512414c9094f7370 (diff) | |
| download | translated-content-c78513fe06939851419aeb549c227730c8228fd7.tar.gz translated-content-c78513fe06939851419aeb549c227730c8228fd7.tar.bz2 translated-content-c78513fe06939851419aeb549c227730c8228fd7.zip | |
Web/HTML/Element/button を更新 (#587)
2021/03/27 時点の英語版に同期
Diffstat (limited to 'files/ja/web/html')
| -rw-r--r-- | files/ja/web/html/element/button/index.html | 160 |
1 files changed, 78 insertions, 82 deletions
diff --git a/files/ja/web/html/element/button/index.html b/files/ja/web/html/element/button/index.html index 985b66e882..59b5bd6928 100644 --- a/files/ja/web/html/element/button/index.html +++ b/files/ja/web/html/element/button/index.html @@ -2,21 +2,21 @@ title: '<button>: ボタン要素' slug: Web/HTML/Element/button tags: + - Element + - Forms - HTML - - HTML フォーム - - 'HTML:フローコンテンツ' - - 'HTML:対話型コンテンツ' - - 'HTML:知覚可能コンテンツ' - - 'HTML:記述コンテンツ' + - HTML forms + - HTML:フローコンテンツ + - HTML:対話型コンテンツ + - HTML:知覚可能コンテンツ + - HTML:記述コンテンツ - Reference - - ウェブ - - フォーム - - 要素 + - Web translation_of: Web/HTML/Element/button --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML の <code><button></code> 要素</strong>はクリックできるボタンを表し、<a href="/ja/docs/Learn/HTML/Forms">フォーム</a>や、文書で単純なボタン機能が必要なあらゆる場所で使用することができます。</span>既定では、 HTML のボタンは {{Glossary("user agent", "ユーザーエージェント")}} が実行されているホストのプラットフォームのスタイルと似ていますが、 <a href="/ja/docs/Web/CSS">CSS</a> を使用してボタンの外見を変更することができます。</p> +<p><span class="seoSummary"><strong>HTML の <code><button></code> 要素</strong>はクリックできるボタンを表し、<a href="/ja/docs/Learn/Forms">フォーム</a>や、文書で単純なボタン機能が必要なあらゆる場所で使用することができます。</span>既定では、 HTML のボタンは {{Glossary("user agent", "ユーザーエージェント")}} が実行されているホストのプラットフォームのスタイルと似ていますが、 <a href="/ja/docs/Web/CSS">CSS</a> を使用してボタンの外見を変更することができます。</p> <div>{{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}</div> @@ -25,12 +25,12 @@ translation_of: Web/HTML/Element/button <table class="properties"> <tbody> <tr> - <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> - <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_labelable">ラベル付け可能</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_submittable">送信可能</a> な <a href="/ja/docs/Web/HTML/Content_categories#Form-associated_">フォーム関連要素</a>、知覚可能コンテンツ</td> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#interactive_content">対話型コンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#form_listed">リスト化</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#form_labelable">ラベル付け可能</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#form_submittable">送信可能</a> な <a href="/ja/docs/Web/Guide/HTML/Content_categories#form-associated_">フォーム関連要素</a>、知覚可能コンテンツ</td> </tr> <tr> <th scope="row">許可されている内容</th> - <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、但し<a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>があってはならない</td> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>、但し<a href="/ja/docs/Web/Guide/HTML/Content_categories#interactive_content">対話型コンテンツ</a>があってはならない</td> </tr> <tr> <th scope="row">タグの省略</th> @@ -38,11 +38,15 @@ translation_of: Web/HTML/Element/button </tr> <tr> <th scope="row">許可されている親要素</th> - <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。</td> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></td> </tr> <tr> <th scope="row">許可されている ARIA ロール</th> - <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</td> + <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</td> </tr> <tr> <th scope="row">DOM インターフェイス</th> @@ -51,103 +55,97 @@ translation_of: Web/HTML/Element/button </tbody> </table> -<h2 id="Attributes" name="Attributes">属性</h2> +<h2 id="Attributes">属性</h2> <p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> <dl> - <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> - <dd>論理属性で、ページ読み込み時に (ユーザーが例えば他のコントロールに入力するなどして動作を上書きしない限り)、入力<a href="/en-US/docs/Web/API/HTMLElement/focus">フォーカス</a>を持つべきボタンであることを指定します。文書中のフォーム関連要素のうちの一つだけにこの属性を指定することができます。</dd> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>論理属性で、ページ読み込み時にこのボタンが入力<a href="/ja/docs/Web/API/HTMLOrForeignElement/focus">フォーカス</a>を持つべきであることを指定します。<strong>文書中の要素一つだけにこの属性を設定することができます。</strong></dd> <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> - <dd>{{HTMLElement("button")}} 要素におけるこの属性は、 Firefox 独自の非標準属性です。Firefox の既定の動作は他のブラウザーと異なり、ページを再読み込みしても {{HTMLElement("button")}} を<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態を維持します</a>。 <code>autocomplete="off"</code> に設定すると、この機能が無効になります。 {{bug(654072)}} をご覧ください。</dd> + <dd>{{HTMLElement("button")}} におけるこの属性は標準外であり、 Firefox 固有のものです。他のブラウザーとは異なり、 Firefox はページを再度読み込む時に<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態を維持します</a>。そのボタンに <code>autocomplete="off"</code> に設定すると、この機能が無効になります。 {{bug(654072)}} をご覧ください。</dd> <dt>{{htmlattrdef("disabled")}}</dt> <dd> - <p>論理属性で、ユーザーがボタンを操作することを抑止します。この属性が設定されていない場合、ボタンを内包する親要素の設定値を継承します。例えば、ボタンの祖先となる {{HTMLElement("fieldset")}} 要素などにも <strong>disabled</strong> 属性が指定されていないのであれば、この子要素であるボタンは使用可能のままであるということです。</p> + <p>論理属性で、ユーザーがボタンを操作することを抑止します。押したりフォーカスを受けたりすることができなくなります。</p> <p>Firefox の動作は他のブラウザーと異なり、ページを再読み込みしても {{HTMLElement("button")}} を<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態を維持します</a>。この機能は {{htmlattrxref("autocomplete","button")}} 属性で制御できます。</p> </dd> - <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> - <dd>ボタンに関連付けられた {{HTMLElement("form")}} 要素 (<em>フォームオーナー</em>) です。属性値は同一文書内の <code><form></code> 要素の <code>id</code> 属性と同一の値にしなくてはなりません。この属性を設定しなかった場合は、祖先に <code><form></code> 要素が存在すれば、その要素に関連付けられます。この属性によって <code><form></code> 要素の子孫にするだけでなく、同一文書内にある任意の <code><form></code> 要素に <code><button></code> 要素を関連付けることが可能になりました。</dd> - <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> - <dd>ボタンによって送信された情報を処理する URL です。指定した場合は、そのボタンの属するフォームの {{htmlattrxref("action","form")}} 属性よりも優先されます。</dd> - <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt> - <dd>ボタンを送信ボタンとして使用する場合、ブラウザーがフォーム情報をサーバーに送信するために使用するフォームデータのエンコード方法を指定します。以下の値が指定可能です。 + <dt>{{htmlattrdef("form")}}</dt> + <dd>ボタンに関連付けられた {{HTMLElement("form")}} 要素 (<em>フォームオーナー</em>) です。この属性の値は、同一文書内の <code><form></code> 要素の <code>id</code> 属性と同一でなければなりません。 (この属性を設定しなかった場合、 <code><button></code> は祖先に <code><form></code> 要素が存在すれば、その要素に関連付けられます。)</dd> + <dd>この属性によって <code><button></code> 要素が <code><form></code> の中になくても、同一文書内にある任意の <code><form></code> 要素に関連付けることが可能になりました。また、祖先の <code><form></code> 要素を上書きすることができます。</dd> + <dt>{{htmlattrdef("formaction")}}</dt> + <dd>このボタンによって送信された情報を処理する URL です。このボタンのフォームオーナーの {{htmlattrxref("action","form")}} 属性よりも優先されます。フォームオーナーがない場合は何もしません。</dd> + <dt>{{htmlattrdef("formenctype")}}</dt> + <dd>このボタンが送信ボタンである場合 (<code><form></code> の中にあるか関連付けられており、 <code>type="button"</code> が設定されていない場合)、送信されるフォームデータのエンコード方法を指定します。指定可能な値は以下の通りです。 <ul> - <li><code>application/x-www-form-urlencoded</code>: 初期値。属性を指定していない場合、この値が使用されます。</li> - <li><code>multipart/form-data</code>: {{HTMLElement("input")}} 要素の {{htmlattrxref("type","input")}} 属性に <code>file</code> を指定して使用する場合に使用。</li> - <li><code>text/plain</code>: デバッグ目的で仕様書に追加されました。実用的なフォーム送信で使用するべきではありません。</li> + <li><code>application/x-www-form-urlencoded</code>: この属性が使用されなかった場合の既定値。</li> + <li><code>multipart/form-data</code>: {{HTMLElement("input")}} 要素の {{htmlattrxref("type","input")}} 属性に <code>file</code> を指定して使用する場合に使用します。</li> + <li><code>text/plain</code>: デバッグ目的で指定されるものです。実際のフォーム送信で使用するべきではありません。</li> </ul> - <p>この属性が指定されている場合、button 属性が紐付けられた form 要素 (form owner)の {{htmlattrxref("enctype","form")}} 属性より、ボタンのそれが優先されます。</p> + <p>この属性が指定された場合、そのボタンのフォームオーナーの {{htmlattrxref("enctype","form")}} 属性より優先されます。</p> </dd> - <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt> - <dd>ボタンが送信ボタンである場合に、ブラウザーがフォーム情報を送信するために使用する <a href="/ja/docs/Web/HTTP/Methods">HTTP メソッド</a>です。以下の値が指定可能です。 + <dt>{{htmlattrdef("formmethod")}}</dt> + <dd>このボタンが送信ボタンである場合 (<code><form></code> の中にあるか関連付けられており、 <code>type="button"</code> が設定されていない場合)、この属性はこのフォームを送信するのに使用される <a href="/ja/docs/Web/HTTP/Methods">HTTP メソッド</a>を指定します。指定可能な値は以下の通りです。 <ul> <li><code>post</code>: フォームのデータは、サーバーへ送信する際に HTTP リクエストの本文に含められます。フォームにパスワードなどの公開するべきではない情報が含まれている場合は、このメソッドを使用してください。</li> - <li><code>get</code>: フォームのデータは、セパレーターとして '?' を使用してフォームの <code>action</code> の URL に追加され、その結果となる URL をサーバーへ送信します。検索フォームのように、まったく副作用がない場合にのみ、このメソッドを使用してください。</li> + <li><code>get</code>: フォームのデータは、フォームの <code>action</code> の URL に、セパレーターとして '?' を使用して追加され、その結果となる URL をサーバーへ送信します。検索フォームのように、まったく<a href="/ja/docs/Glossary/Idempotent">副作用がない</a>場合にのみ、このメソッドを使用してください。</li> </ul> - <p>この属性が指定された場合、これはボタンのフォームオーナーの {{htmlattrxref("method","form")}} 属性より優先して使用されます。</p> + <p>指定された場合、この属性はボタンのフォームオーナーの {{htmlattrxref("method","form")}} 属性より優先して使用されます。</p> </dd> - <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt> - <dd>論理属性で、ボタンが送信ボタンである場合に、フォームデータ送信時に内容を<a href="/ja/docs/Learn/HTML/Forms/Form_validation">検証</a>しないように指定するものです。この属性が指定された場合、ボタンの属するフォームオーナーの {{htmlattrxref("novalidate","form")}} 属性より優先して使用されます。</dd> - <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt> - <dd>ボタンが送信ボタンである場合、フォームの送信後に受信したレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードです。これは、<em>閲覧コンテキスト</em> (タブ、ウィンドウ、インラインフレーム) の <code>name</code> またはそれを表すキーワードです。この属性が指定された場合、ボタンの属するフォームオーナーの {{htmlattrxref("target", "form")}} 属性より優先されます。以下のキーワードは特別な意味を持ちます。 + <dt>{{htmlattrdef("formnovalidate")}}</dt> + <dd>論理属性で、ボタンが送信ボタンである場合に、フォームデータ送信時に内容を<a href="/ja/docs/Learn/Forms/Form_validation">検証</a>しないように指定するものです。この属性が指定された場合、ボタンの属するフォームオーナーの {{htmlattrxref("novalidate","form")}} 属性より優先して使用されます。</dd> +<dd>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/image"><input type="image"></a></code> および <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> 要素でも使用できます。</dd> + <dt>{{htmlattrdef("formtarget")}}</dt> + <dd>ボタンが送信ボタンである場合、フォームの送信後に受信するレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードです。これは、<em>閲覧コンテキスト</em> (タブ、ウィンドウ、{{HTMLElement("iframe")}}) の <code>name</code> またはそれを表すキーワードです。この属性が指定された場合、ボタンのフォームオーナーの {{htmlattrxref("target", "form")}} 属性より優先されます。以下のキーワードは特別な意味を持ちます。 <ul> - <li><code>_self</code>: 同じ閲覧コンテキストにレスポンスデータを読み込みます。これは、属性が指定されていない場合の既定値です。</li> - <li><code>_blank</code>: 新しい無名の閲覧コンテキスト — 普通は、ブラウザーの設定に従い、新しいタブまたはウィンドウ — にレスポンスデータを読み込みます。</li> - <li><code>_parent</code>: 現在のコンテキストの親の閲覧コンテキストにレスポンスデータを読み込みます。親要素がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> - <li><code>_top</code>: 最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以前の祖先をもたない閲覧コンテキスト) にレスポンスデータを読み込みます。親要素がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> + <li><code>_self</code>: レスポンスを同じ閲覧コンテキストに読み込みます。これは、属性が指定されていない場合の既定値です。</li> + <li><code>_blank</code>: レスポンスを新しい無名の閲覧コンテキスト — 普通は、ブラウザーの設定に従い、新しいタブまたはウィンドウ — に読み込みます。</li> + <li><code>_parent</code>: レスポンスを現在のコンテキストの親の閲覧コンテキストに読み込みます。親要素がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> + <li><code>_top</code>: レスポンスを最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以前の祖先をもたない閲覧コンテキスト) に読み込みます。親要素がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> </ul> </dd> <dt>{{htmlattrdef("name")}}</dt> - <dd>フォームデータの一部としてボタンの <code>value</code> との組み合わせで送信される、ボタンの名前です。</dd> + <dd>このボタンの名前で、フォームデータの一部としてこのボタンの <code>value</code> との組み合わせで送信されます。</dd> <dt>{{htmlattrdef("type")}}</dt> - <dd>ボタンの種別。以下の値を指定可能です。 + <dd>このボタンの既定の動作です。以下の値が指定可能です。 <ul> - <li><code>submit</code>: 自身が属するフォームのデータをサーバーに送信するボタンとなります。これは <code>type</code> 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合の既定の動作です。</li> - <li><code>reset</code>: <code><input type="reset"></code> と同様に、すべてのコントロールを初期値にリセットするボタンです。</li> - <li><code>button</code>: ボタンには既定の動作がなく、押されても何も行いません。クライアントサイドスクリプトを要素のイベントに関連付けることで、イベントが発生したときに実行させます。</li> + <li><code>submit</code>: このボタンはフォームのデータをサーバーへ送信します。これはこの属性が <code><form></code> に関連付けられたボタンに指定されていない場合、またはこの属性が空であったり不正な値であったりした場合の既定値です。</li> + <li><code>reset</code>: このボタンはすべてのコントロールを初期値に初期化します。 <a href="/ja/docs/Web/HTML/Element/input/reset"><input type="reset"></a> と同様です。 (この動作はユーザーを困らせる傾向があります。)</li> + <li><code>button</code>: ボタンには既定の動作がなく、既定では押されても何も行いません。この要素のイベントを待ち受けし、イベントが発生すると起動されるクライアント側スクリプトを設定することができます。</li> </ul> </dd> <dt>{{htmlattrdef("value")}}</dt> - <dd>ボタンの初期値です。フォームデータと一緒に送信する際に、ボタンの <code>name</code> と関連付けられる値を定義します。この値は、フォームに送信する際にサーバーに引数として渡されます。</dd> + <dd>フォームのデータと一緒に送信される際に、ボタンの <code>name</code> に結び付けられる値を定義します。この値は、フォームに送信する際にサーバーに引数として渡されます。</dd> </dl> -<h2 id="Notes" name="Notes">メモ</h2> - -<p><code><button></code> 要素は {{HTMLElement("input")}} 要素よりもずっと簡単に整形できます。 {{HTMLElement("input")}} が <code>value</code> 属性に文字列を設定することしかできないのに対し、内部に HTML コンテンツを追加できますし (<code><em></code>、 <code><strong></code> や <code><img></code> さえも)、複雑な描画のために {{Cssxref("::after")}} や {{Cssxref("::before")}} 疑似要素を使用することもできます。</p> +<h2 id="Notes">メモ</h2> -<p>ボタンがサーバーにデータを送信するためのものでない場合は、 <code>button</code> に <code>type</code> 属性を設定することを忘れないでください。さもないと、フォームデータを送信して (存在しない) レスポンスを読み込み、文書の現在の状態を破棄してしまうおそれがあります。</p> +<p>送信ボタンに <code>formaction</code> 属性が設定されていても、関連付けられたフォームがない場合は何もしません。ボタンを <code><form></code> で囲むか、 <code>form</code> でフォームの id を設定するかしてフォームオーナーを設定する必要があります。</p> -<div class="blockIndicator warning"> -<p>Internet Explorer 7 には <code><button type="submit" name="myButton" value="foo">Click me</button></code> でフォームデータを送信したとき、 <code>POST</code> データが <code>myButton=foo</code> ではなく <code>myButton=Click me</code> として送信されるバグがあります。この問題は Internet Explorer 6 ではもっと悪く、ボタンを介してフォームデータを送信すると、 Internet Explorer 7 と同様の方法でフォーム内のすべてのボタンが送信されるバグもあります。このバグは Internet Explorer 8 で修正されました。</p> -</div> +<p><code><button></code> 要素は {{HTMLElement("input")}} 要素よりもずっと簡単にスタイル付けできます。内部に HTML コンテンツを (<code><em></code>、 <code><strong></code> や <code><img></code> さえも) 追加できますし、複雑な描画のために {{Cssxref("::after")}} や {{Cssxref("::before")}} 擬似要素を使用することもできます。</p> -<div class="blockIndicator note"> -<p>Firefox の既定の動作は他のブラウザーと異なり、ページを再読み込みしても {{HTMLElement("button")}} を<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態を維持します</a>。 {{htmlattrxref("autocomplete","button")}} 属性の値を <code>off</code> にすると、この機能が無効になります。 {{bug(654072)}} をご覧ください。</p> -</div> +<p>ボタンがサーバーにデータを送信するためのものでない場合は、 <code>type</code> 属性を <code>button</code> に設定することを忘れないでください。さもないと、フォームデータを送信して (存在しない) レスポンスを読み込み、文書の現在の状態を破棄してしまうおそれがあります。</p> -<p>Android 版 Firefox のバージョン35より前では、すべてのボタンに既定でグラデーションの {{cssxref("background-image")}} を設定していました ({{bug(763671)}} をご覧ください)。これは <code>background-image: none</code> を使用して無効化できます。</p> - -<h2 id="Example" name="Example">例</h2> +<h2 id="Example">例</h2> <pre class="brush:html"><button name="button">クリックしてね</button> </pre> <p>{{ EmbedLiveSample('Example', 200, 64) }}</p> -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> +<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> -<h3 id="Icon_buttons" name="Icon_buttons">アイコンボタン</h3> +<h3 id="Icon_buttons">アイコンボタン</h3> -<p>アイコンのみを使って機能を表現するボタンは、アクセシブル名を持ちません。アクセシブル名は読み上げソフトのような支援技術で文書を解析し、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>を生成するときに、アクセスするためのプログラム的なフックを提供します。そのため、支援技術や移動やページコンテンツの操作にアクセシビリティツリーを使用します。</p> +<p>アイコンのみを使って機能を表現するボタンは、<em>アクセシブル名</em>を持ちません。アクセシブル名は画面リーダーのような支援技術で文書を解析し、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">アクセシビリティツリー</a>を生成するときに、アクセスするためのプログラム的なフックを提供します。そのため、支援技術や移動やページコンテンツの操作にアクセシビリティツリーを使用します。</p> <p>アイコンボタンにアクセシブル名を与えるには、 <code><button></code> 要素でボタンの機能を簡潔に説明するテキスト文字列を提供してください。</p> -<h4 id="Example_2" name="Example_2">例</h4> +<h4 id="Example_2">例</h4> -<pre><button name="favorite" type="button"> +<pre><button name="favorite"> <svg aria-hidden="true" viewBox="0 0 10 10"><path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/></svg> お気に入りに追加 </button> @@ -159,13 +157,13 @@ translation_of: Web/HTML/Element/button <ul> <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">What is an accessible name? | The Paciello Group</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">MDN "WCAG を理解する ― ガイドライン 4.1 の解説"</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Robust#guideline_4.1_—_compatible_maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">MDN "WCAG を理解する ― ガイドライン 4.1 の解説"</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0</a></li> </ul> -<h3 id="Size_and_Proximity" name="Size_and_Proximity">大きさと近接性</h3> +<h3 id="Size_and_Proximity">大きさと近接性</h3> -<h4 id="Size" name="Size">大きさ</h4> +<h4 id="Size">大きさ</h4> <p>ボタンなどの対話型要素は、容易にアクティブ化させることができるだけの大きさで提供するようにしてください。これは、動きが不自由な人、スタイラスや指のような正確性の低い形の入力を使用している人など、様々な人に役立ちます。 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS ピクセル</a>以上の操作のための大きさが推奨されています。</p> @@ -175,7 +173,7 @@ translation_of: Web/HTML/Element/button <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets - The A11Y Project</a></li> </ul> -<h4 id="Proximity" name="Proximity">近接性</h4> +<h4 id="Proximity">近接性</h4> <p>たくさんの対話型コンテンツ — ボタンを含む — が互いに視覚的に接近して配置されるときは、それを隔てるために間隔を置いてください。間隔を置くことは、動きが不自由で誤った対話型コンテンツを有効化してしまうことがある人にとって有益です。</p> @@ -185,9 +183,13 @@ translation_of: Web/HTML/Element/button <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li> </ul> +<h3 id="ARIA">ARIA 状態情報</h3> + +<p>ボタンの状態を記述するために使用する正しい ARIA 属性は <code>aria-pressed</code> であり、 <code>aria-checked</code> や <code>aria-selected</code> ではありません。詳しくは、 <a href="/ja/docs/Web/Accessibility/ARIA/Roles/button_role">ARIA button ロール</a>についての情報をご覧ください。</p> + <h3 id="Firefox">Firefox</h3> -<p>Firefox はフォーカスされたボタンに小さな点線の境界線を表示します。この境界線はブラウザーのスタイルシートの CSS で宣言されていますが、 <code>button{{cssxref("::-moz-focus-inner")}} { }</code> を使用して独自のフォーカスのスタイルを追加すると上書きすることができます。</p> +<p>Firefox はフォーカスされたボタンに小さな点線の境界線を表示します。この境界線はブラウザーのスタイルシートの CSS で宣言されていますが、 <code><a href="/ja/docs/Web/CSS/::-moz-focus-inner">button::-moz-focus-inner { }</a></code> を使用して独自のフォーカスのスタイルを追加すると上書きすることができます。</p> <p>上書きした場合は、弱視の人が知覚するのの十分なほど、<strong>フォーカスがボタンに移動したときの状態の変化が十分に大きいことを確認すること</strong>が重要です。</p> @@ -195,11 +197,11 @@ translation_of: Web/HTML/Element/button <ul> <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> </ul> -<h3 id="Clicking_and_focus" name="Clicking_and_focus">クリックとフォーカス</h3> +<h3 id="Clicking_and_focus">クリックとフォーカス</h3> <p>{{HTMLElement("button")}} をクリックしたときに (既定で) フォーカスを得るかは、ブラウザーおよび OS により異なります。{{HTMLElement("input")}} 要素では <code>type="button"</code>、<code>type="submit"</code> ともに同じ動作になります。</p> @@ -264,7 +266,7 @@ translation_of: Web/HTML/Element/button </tbody> </table> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Specifications">仕様書</h2> <table class="standard-table"> <thead> @@ -276,12 +278,12 @@ translation_of: Web/HTML/Element/button </thead> <tbody> <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{SpecName('HTML WHATWG', 'form-elements.html#the-button-element', '<button>')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> <td></td> </tr> <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-button-element', '<button>')}}</td> <td>{{Spec2('HTML5 W3C')}}</td> <td></td> </tr> @@ -293,12 +295,6 @@ translation_of: Web/HTML/Element/button </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> <p>{{Compat("html.elements.button")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<p>フォーム作成に用いるその他の要素: {{HTMLElement("form")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</p> |