diff options
| -rw-r--r-- | files/ja/web/accessibility/aria/roles/form_role/index.html | 77 |
1 files changed, 31 insertions, 46 deletions
diff --git a/files/ja/web/accessibility/aria/roles/form_role/index.html b/files/ja/web/accessibility/aria/roles/form_role/index.html index b181d1ff15..e098fe4efe 100644 --- a/files/ja/web/accessibility/aria/roles/form_role/index.html +++ b/files/ja/web/accessibility/aria/roles/form_role/index.html @@ -7,9 +7,7 @@ tags: - Accessibility translation_of: Web/Accessibility/ARIA/Roles/Form_Role --- -<div>\{{ariaref}}</div> - -<p><code>form</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、HTML のフォームと同等の機能を提供するページ上の要素のグループを識別するために使用できます。</p> +<p>フォーム (<code>form</code>) <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>は、HTML のフォームと同等の機能を提供するページ上の要素のグループを識別するために使用できます。</p> <pre class="brush: html"><div role="form" id="contact-info" aria-label="連絡先"> <!-- フォームのコンテンツ --> @@ -19,24 +17,20 @@ translation_of: Web/Accessibility/ARIA/Roles/Form_Role <p>これは、ユーザーの連絡先を収集して保存するフォームです。</p> <div class="warning"> -<p><strong>重要</strong>: 本当に正当な理由がない限り、HTML の {{htmlelement("form")}} 要素を使用してフォームのコントロールを格納するべきです。</p> +<p><strong>重要</strong>: 十分に正当な理由がない限り、ARIA の フォーム (<code>form</code>) ロールではなく、HTML の {{htmlelement("form")}} 要素を使用してフォームコントロールを格納してください。 HTML の <code><form></code> 要素は、支援技術にフォームがあることを伝えるのに十分です。</p> </div> <h2 id="Description" name="Description">説明</h2> -<p><code>form</code> ロールは、フォーム（form）を識別するための<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマーク</a>です。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 <code>form</code> ランドマークは、他の指名されたランドマークが適切でない場合（例えば、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_Role">main</a></code> や <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Search_Role">search</a></code>）に、全体としてフォームを作成するために組み合わせるアイテムとオブジェクトのコレクションを含む領域を識別します。</p> +<p>フォーム (<code>form</code>) ランドマーク (<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">landmark</a>) は、(メイン (<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></code>) や検索 (<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></code>) など) 他の名前付きランドマークが適切でない場合に、全体として結合してフォームを作成する、項目とオブジェクトのコレクションを含むコンテンツのリージョンを識別します。</p> -<dl> - <dd> - <div class="note"> - <p>{{htmlelement("form")}} 要素を使用すると、アクセス可能な名前がある場合、自動的にセクションに <code>contentinfo</code> ロールと <code>form</code> ランドマークを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p> - </div> - </dd> -</dl> +<div class="note"> +<p>{{htmlelement("form")}} 要素を使用すると、アクセス可能な名前が提供されている場合、コンテンツのセクションがフォーム (<code>form</code>) ランドマークとして自動的に伝えられます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を使用することを常に好むべきです。</p> +</div> -<p>可能であれば、HTML の {{htmlelement("form")}} 要素を使用してください。 <code><form></code> 要素は、アクセス可能な名前（例えば、<code>aria-labelledby</code>、<code>aria-label</code>、または <code>title</code>）がある場合、<code>form</code> ランドマークを定義します。 ユーザーがフォームの目的を理解できるように、文書内の各フォームに固有のラベルを付けるようにしてください。 このラベルは、支援技術のユーザーだけでなく、すべてのユーザーに表示するべきです。 検索機能にフォームが使用されている場合は、<code>form</code> ランドマークの代わりに <code>search</code> ランドマークを使用します。</p> +<p>可能であれば、HTML の {{htmlelement("form")}} 要素を使用してください。 <code><form></code> 要素は、アクセス可能な名前 (<code>aria-labelledby</code>、<code>aria-label</code>、<code>title</code> など) がある場合にフォーム (<code>form</code>) ランドマークを定義します。 ユーザーがフォームの目的を理解できるように、文書内の各フォームに一意のラベルを付けるようにしてください。 このラベルは、支援技術のユーザーだけでなく、全てのユーザーに表示するべきです。 フォームを検索機能に使用する場合は、フォーム (<code>form</code>) ランドマークの代わりに検索 (<code>search</code>) ランドマークを使用してください。</p> -<p>ページの領域を特定するには、<code>role="form"</code> を使用します。 すべてのフォームのフィールドを識別するためにそれを使用しないでください。 <code><form></code> の代わりに <code>form</code> ランドマークを使用している場合でも、<code><button></code>、<code><input></code>、<code><select></code>、<code><textarea></code> などのネイティブな HTML フォームのコントロールを使用することをお勧めします。</p> +<p><code>role="form"</code> は、ページのリージョンを識別するために使用し、フォームフィールドそれぞれを識別するために使用しないでください。 <code><form></code> の代わりにフォーム (<code>form</code>) ランドマークを使用している場合でも、<code><button></code>、<code><input></code>、<code><select></code>、<code><textarea></code> などのネイティブな HTML フォームコントロールを使用することをお勧めします。</p> <h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> @@ -50,12 +44,12 @@ translation_of: Web/Accessibility/ARIA/Roles/Form_Role <dl> <dt><code>onsubmit</code></dt> - <dd>onSubmit イベントハンドラは、フォームの送信時に発生するイベントを処理します。 <code><form></code> 以外のものは送信できませんので、{{domxref("XMLHTTPRequest")}} などの代替データ送信メカニズムを構築するには、JavaScript を使用する必要があります。</dd> + <dd>onSubmit イベントハンドラーは、フォームの送信時に発生するイベントを処理します。 <code><form></code> でないものは送信できないため、JavaScript を使用して、{{domxref("XMLHTTPRequest")}} などの代替データ送信メカニズムを構築する必要があります。</dd> </dl> <h2 id="Examples" name="Examples">例</h2> -<pre><span class="tag"><div role="form" id="send-comment" aria-label="</span>コメントを追加<span class="tag">"></span> +<pre class="brush: html"><div role="form" id="send-comment" aria-label="コメントを追加"> <label for="username">ユーザー名</label> <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text"> @@ -66,75 +60,60 @@ translation_of: Web/Accessibility/ARIA/Roles/Form_Role <textarea id="comment" name="comment"></textarea> <input value="コメント" type="submit"> -<span class="tag"></div</span>> +</div> </pre> <p>代わりに <code><form></code> を使用することをお勧めします。</p> -<pre><span class="tag"><form id="send-comment" aria-label="</span>コメントを追加<span class="tag">"></span> +<pre class="brush: html"><form id="send-comment" aria-label="コメントを追加"> .... -<span class="tag"></form</span>> +</form> </pre> <h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> <h3 id="Use_sparingly" name="Use_sparingly">控えめに使用する</h3> -<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> <h3 id="Inputs_are_not_forms" name="Inputs_are_not_forms">入力はフォームではない</h3> -<p>すべての<a href="/ja/docs/Web/HTML/Element#Forms">フォーム要素</a>（入力、テキスト領域、選択など）で <code>role="form"</code> を宣言する必要はありません。 フォーム要素をラップする HTML 要素で宣言するべきです。 理想的には、{{htmlelement("form")}} 要素をラップ要素として使用し、<code>role="form"</code> を宣言しないでください。</p> +<p><a href="/ja/docs/Web/HTML/Element#forms">フォーム要素</a>（入力、テキスト領域、選択など）それぞれで <code>role="form"</code> を宣言する必要はありません。 それは、フォーム要素を包む HTML 要素で宣言するべきです。 理想的には、包む要素として {{htmlelement("form")}} 要素を使用し、<code>role="form"</code> を宣言しないでください。</p> <h3 id="Search" name="Search">検索</h3> -<p>フォームを使用して検索する場合は、より専門化した <code>role="search"</code> 値を使用する必要があります。</p> +<p>フォームを検索に使用する場合は、より専門化した <code>role="search"</code> 値を使用するべきです。</p> <h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> -<p>それそれの {{htmlelement("form")}} 要素と <code>form</code> ランドマークロールには、ラベルが必要です。 このラベルで、支援技術のユーザーがフォームの目的をすばやく理解することができます。</p> - -<p>フォームにラベルを付けるには、2つの方法があります。 {{htmlelement("legend")}} 要素は、<code><form></code> 要素の直接の子孫として使用します。<code>role="form"</code> の宣言を使用している場合、<code>role="form"</code> が宣言されている要素に適用される <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a> を使用します。 理想的には、フォームにラベルを付けるには、<code><form></code> と <code><legend></code> のテクニックを使用します。<br> - （訳注：<code><legend></code> は <code><fieldset></code> の最初の子でなければならないとある。）</p> +<p>ランドマークとして公開する必要がある、それぞれの {{htmlelement("form")}} 要素とフォームロール (form <code>role</code>) には、アクセス可能な名前を付ける必要があります。 この名前により、支援技術のユーザーはフォームランドマークの目的をすばやく理解できるようになります。</p> -<h4 id="Using_the_<form>_element" name="Using_the_<form>_element"><code><form></code> 要素の使用</h4> - -<pre class="brush: html"><form id="address"> - <legend>あなたの住所を更新してください</legend> - <!-- フォームのコンテンツ --> -</form> -</pre> +<p><code>role="form"</code> を与えたのと同じ要素で、<code>aria-labelledby</code>、<code>aria-label</code>、または <code>title</code> を使用して、アクセス可能な名前を付けます。</p> <h4 id="Using_roleform" name="Using_roleform"><code>role="form"</code> の使用</h4> -<pre class="brush: html"><div role="form" id="gift-cards" aria-label="ギフトカードを購入する"> +<pre class="brush: html"><div role="form" id="gift-cards" aria-label="ギフトカードの購入"> <!-- フォームのコンテンツ --> </div></pre> <h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> -<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>aria-label="お問い合わせフォーム"</code> の <code>role="form"</code> の宣言は、"form お問い合わせフォーム" として重複してアナウンスすることができます。</p> +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>role="form"</code> の宣言に <code>aria-label="お問い合わせフォーム"</code> を使用した場合、「お問い合わせフォームフォーム」として重複してアナウンスすることがあります。</p> <h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> <h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> -<p>{{htmlelement("form")}} 要素を使用すると、自動的にセクションが <code>form</code> ロールを持つことを伝えます。 可能であれば、<code><form></code> を代わりに使用することをお勧めします。</p> +<p>{{htmlelement("form")}} 要素を使用すると、セクションがフォーム (<code>form</code>) ロールを持つことを自動的に伝えます。 可能であれば、<code><form></code> を代わりに使用することをお勧めします。</p> <h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> -<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。</p> <ul> - <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> + <li><a href="https://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> </ul> -<dl> -</dl> - -<dl> -</dl> - <h2 id="Specifications" name="Specifications">仕様</h2> <table class="standard-table"> @@ -164,8 +143,14 @@ translation_of: Web/Accessibility/ARIA/Roles/Form_Role <li>{{htmlelement("form")}}: フォーム要素</li> <li>{{htmlelement("legend")}}: 凡例要素</li> <li><a href="https://www.w3.org/TR/wai-aria/#form">form (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li> - <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML5 ドキュメントのセクションとアウトライン</a></li> - <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li> <li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li> </ul> + +<section id="Quick_links"> + <ol> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA ロール</strong></a>{{ListSubpagesForSidebar("/ja/docs/Web/Accessibility/ARIA/Roles")}}</li> + </ol> +</section> |