diff options
Diffstat (limited to 'files/ja/web/accessibility/aria/roles')
| -rw-r--r-- | files/ja/web/accessibility/aria/roles/region_role/index.html | 57 |
1 files changed, 29 insertions, 28 deletions
diff --git a/files/ja/web/accessibility/aria/roles/region_role/index.html b/files/ja/web/accessibility/aria/roles/region_role/index.html index d986fecb65..805519350d 100644 --- a/files/ja/web/accessibility/aria/roles/region_role/index.html +++ b/files/ja/web/accessibility/aria/roles/region_role/index.html @@ -7,9 +7,7 @@ tags: - Accessibility translation_of: Web/Accessibility/ARIA/Roles/Region_role --- -<p>\{{ariaref}}</p> - -<p><span class="seoSummary"><code>region</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書内で、著者が重要であると識別した領域を識別するために使用されます。 これは、他のランドマークロールのどれも適切でないときでも、汎用のランドマークを提供することで、人々が容易にナビゲートできるようにするために使用されます。</span></p> +<p><span class="seoSummary">リージョン (<code>region</code>) <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>は、文書内で、著者が重要であると識別した領域を識別するために使用されます。 これは、他のランドマークロールのどれも適切でないときでも、汎用のランドマークを提供することで、人々が容易にナビゲートできるようにするために使用されます。</span></p> <pre class="brush: html"><div role="region" aria-label="例"> <!-- リージョンのコンテンツ --> @@ -18,21 +16,21 @@ translation_of: Web/Accessibility/ARIA/Roles/Region_role <h2 id="Description" name="Description">説明</h2> -<p><code>region</code> ロールは、ARIA の<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報がプログラム的に表されます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。</p> +<p>リージョン (<code>region</code>) ロールは、ARIA の<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>です。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報がプログラム的に表されます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。</p> -<p><code>region</code> ロールは、ユーザーがそのセクションに簡単にナビゲートし、ページの要約にリストされることを望むほど重要なコンテンツのセクションのために予約するべきです。 <code>region</code> ロールはより汎用の用語であり、識別が必要なセクションが、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Banner_role">banner</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></code> などの他のランドマークロールのいずれかによって正確に説明できない場合に使用するべきです。</p> +<p>リージョン (<code>region</code>) ロールは、ユーザーがそのセクションに簡単にナビゲートし、ページの要約にリストされることを望むほど重要なコンテンツのセクションのために予約するべきです。 リージョン (<code>region</code>) ロールはより汎用の用語であり、識別が必要なセクションが、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Banner_role">banner</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></code> などの他のランドマークロールのいずれかによって正確に説明できない場合にのみ使用するべきです。</p> -<p><code>region</code> ロールを持つすべての要素には、リージョン（region）内のコンテンツの目的を説明するラベルを含めるべきで、目に見えるヘッダーを参照する <code>aria-labelledby</code> を伴うのが好ましいです。 目に見える適切なヘッダーがない場合は、<code>aria-label</code> を使用するべきです。</p> +<p>リージョン (<code>region</code>) ロールを持つすべての要素には、リージョン内のコンテンツの目的を説明するラベルを含めるべきで、目に見えるヘッダーを参照する <code>aria-labelledby</code> を伴うのが好ましいです。 目に見える適切なヘッダーがない場合は、<code>aria-label</code> を使用するべきです。</p> -<p><code>region</code> ランドマークロールのコンテンツは、文書のメインコンテンツから分離されている場合にも意味をなすべきです。</p> +<p>リージョン (<code>region</code>) ランドマークロールのコンテンツは、文書のメインコンテンツから分離されている場合にも意味をなすべきです。</p> -<p>{{htmlelement("section")}} 要素を使用すると、アクセス可能な名前が与えられている場合、自動的にセクションが <code>region</code> ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素（この場合は <code><section></code>）を常に使用するべきです。</p> +<p>{{htmlelement("section")}} 要素を使用すると、アクセス可能な名前が与えられている場合、自動的にセクションがリージョン (<code>region</code>) ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素（この場合は <code><section></code>）を常に使用するべきです。</p> <h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> <dl> - <dt><span class="highlight-span">aria-labeledby</span></dt> - <dd>リージョンにラベルを付けるには、この属性を使用します。 多くの場合、<code>aria-labeledby</code> 属性の値は、セクションのタイトルに使用される要素の ID になります。</dd> + <dt><span class="highlight-span">aria-labelledby</span></dt> + <dd>リージョンにラベルを付けるには、この属性を使用します。 多くの場合、<code>aria-labelledby</code> 属性の値は、セクションのタイトルに使用される要素の ID になります。</dd> </dl> <h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> @@ -45,42 +43,42 @@ translation_of: Web/Accessibility/ARIA/Roles/Region_role <h2 id="Examples" name="Examples">例</h2> -<pre><span class="tag"><div role="region" aria-labeledby="region-heading"> - <h2 id="region-heading"></span>この見出しの <code>id</code> 属性は、このリージョンがアクセス可能な名前を持つのに役立ちます<span class="tag"></h2> - <!-- </span>リージョンのコンテンツ<span class="tag"> --> -</div></span> +<pre class="brush: html"><div role="region" aria-labelledby="region-heading"> + <h2 id="region-heading"></span>この見出しの <code>id</code> 属性は、このリージョンがアクセス可能な名前を持つのに役立ちます</h2> + <!-- リージョンのコンテンツ --> +</div> </pre> <h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> -<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> -<p>他の関連<a href="/ja/docs/Web/HTML/Element#Content_sectioning">コンテンツセクショニング要素</a>または<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>が当てはまらない場合にのみ、<code>region</code> ロールを使用してください。 ページ上に複数のリージョンが存在する場合は、そのページの全体構造を再検討する価値があります。</p> +<p>他の関連<a href="/ja/docs/Web/HTML/Element#content_sectioning">コンテンツセクショニング要素</a>または<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">ランドマークロール</a>が当てはまらない場合にのみ、リージョン (<code>region</code>) ロールを使用してください。 ページ上に複数のリージョンが存在する場合は、そのページの全体構造を再検討する価値があります。</p> <h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> <h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> -<p>{{htmlelement("section")}} 要素を使用すると、アクセス可能な名前が与えられている場合、自動的にセクションが <code>region</code> ロールを持つことを伝えます。 可能であれば、<code><section></code> を代わりに使用することをお勧めします。</p> +<p>{{htmlelement("section")}} 要素を使用すると、アクセス可能な名前が与えられている場合、自動的にセクションがリージョン (<code>region</code>) ロールを持つことを伝えます。 可能であれば、<code><section></code> を代わりに使用することをお勧めします。</p> <h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> -<p>文書に複数の <code>region</code> ランドマークロールがある場合は、それぞれにラベルを付けます。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。</p> +<p>文書に複数のリージョン (<code>region</code>) ランドマークロールがある場合は、それぞれにラベルを付けます。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。</p> -<pre class="brush: html"><div role="region" aria-labeledby="heading"> +<pre class="brush: html"><div role="region" aria-labelledby="use-discretion"> <h3 id="use-discretion">慎重に <code>region</code> ロールを使用してください</h3> <!-- コンテンツ --> </div> ... -<div role="region" aria-labeledby="please-reconsider"> +<div role="region" aria-labelledby="please-reconsider"> <h3 id="please-reconsider">文書構造を再検討してください</h3> <!-- コンテンツ --> </div> </pre> -<p>この例では、リージョンのラベルは <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labeledby</a></code> 属性によって作成されています。</p> +<p>この例では、リージョンのラベルは <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> 属性によって作成されています。</p> <h3 id="Scrolling_content_areas_with_overflow_text" name="Scrolling_content_areas_with_overflow_text">オーバーフローテキストを含むコンテンツ領域のスクロール</h3> @@ -95,7 +93,7 @@ translation_of: Web/Accessibility/ARIA/Roles/Region_role <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> <h2 id="Specifications" name="Specifications">仕様</h2> @@ -117,12 +115,8 @@ translation_of: Web/Accessibility/ARIA/Roles/Region_role </tbody> </table> -<p> </p> - <h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> -<p> </p> - <p>TBD</p> <h2 id="See_also" name="See_also">関連情報</h2> @@ -130,9 +124,16 @@ translation_of: Web/Accessibility/ARIA/Roles/Region_role <ul> <li>{{htmlelement("section")}}: 汎用セクション要素</li> <li><a href="https://www.w3.org/TR/wai-aria/#region">region (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li> - <li><a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">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://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li> <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li> <li><a href="http://html5doctor.com/the-section-element/">The section element | HTML5 Doctor</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> |