diff options
Diffstat (limited to 'files/ja/web/accessibility/aria/roles')
28 files changed, 4424 insertions, 0 deletions
diff --git a/files/ja/web/accessibility/aria/roles/alert_role/index.html b/files/ja/web/accessibility/aria/roles/alert_role/index.html new file mode 100644 index 0000000000..89b0251538 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/alert_role/index.html @@ -0,0 +1,70 @@ +--- +title: 'ARIA: alert ロール' +slug: Web/Accessibility/ARIA/Roles/Alert_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Alert_Role +--- +<p class="summary">\{{ariaref}}<span class="seoSummary"><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">alert</a></code> ロールは、要素が動的に更新されたことをユーザーに通知するために使用できます。 ロールが追加されると、スクリーンリーダーは更新されたコンテンツの読み上げを即座に開始します。 ユーザーがアラートを閉じることを期待する場合は、代わりに <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></code> ロールを使用するべきです。</span></p> + +<h2 id="Description" name="Description">説明</h2> + +<p>5つのライブリージョンロールの1つである <code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">alert</a></code> ロールは、重要な、通常は時間依存の情報をユーザーに提供するために使用され、要素が動的に更新されたことをユーザーに伝えることがよくあります。</p> + +<p><code>alert</code> ロールは、アラート（alert）メッセージを含むノードに追加し、アラートをトリガーする要素には追加しません。 アラートは主張的なライブリージョンです。 <code>role="alert"</code> の設定は、<code>aria-live="assertive"</code> と <code>aria-atomic="true"</code> の設定と同じです。 それらはフォーカスを受け取らないので、フォーカスを管理する必要はなく、ユーザーインタラクションを必要とするべきではありません。</p> + +<p><code>alert</code> ロールについて最も重要なことは、動的コンテンツ用であることです。 ユーザーがフォームに記入し、JavaScript を使用してエラーメッセージを追加すると、アラートがすぐにメッセージを読み上げるなどの状況に最適です。 ユーザーが HTML と対話していない HTML 上では使用するべきではありません。 例えば、ページ上に複数の可視のアラートが散在して読み込まれたページは、動的にトリガーされないため読み上げられません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>アラートをトリガーする最も基本的な方法は、デフォルトで <code>display: none;</code> を持つ要素に <code>role="alert"</code> を追加することです。 CSS や JavaScript で <code><a href="/ja/docs/Web/CSS/CSS_Display">display</a></code> の値を変更すると、自動的にスクリーンリーダーがコンテンツを読み上げるようになります。</p> + +<pre class="brush: html"><p role="alert" style="display: none;">要素が表示されるとアラートがトリガーされます。</p></pre> + +<p>CSS だけでアラートをトリガーすることは可能ですが、ブラウザやスクリーンリーダーのサポートが増え、イベントハンドラやフォームの検証などのより大きなユーザーインタラクションの一部として、より適切な場合が多いため、JavaScript を使用する方がよいでしょう。 JavaScript を使用すると、開発者はアラートの追加と削除を適切に制御できます。</p> + +<pre class="brush: html"><button type="button" onclick="triggerAlert">アラートをトリガー</button> +<p class="alert">ボタンを押すとアラートがトリガーされます。</p> +</pre> + +<pre class="brush: js">function triggerAlert() { + var alertEl = document.querySelector('.alert'); + alertEl.addAttribute("role", "alert"); +} +</pre> + +<p>（訳注：<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">ARIA ライブリージョン</a>によると、alert ロールを動的に追加してもトリガーされないそうです。）</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p><code>alert</code> ロールは、変更されたコンテンツを読み上げるべきで、直ちにユーザーの注意を引く必要があるため、静的コンテンツに使用したり、定期的に使用したりするべきではありません。 アラートは、定義上、破壊的です。 一度にたくさんのアラートがある場合や、不必要なアラートがある場合、悪いユーザーエクスペリエンスをもたらします。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#alert","Alert")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#alert","Alert")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">ARIA: alertdialog ロール</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2017/04/aria-alert-support/">ARIA alert support - The Paciello Group</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">ARIA ライブリージョン</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role">alert ロールの使用</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/application_role/index.html b/files/ja/web/accessibility/aria/roles/application_role/index.html new file mode 100644 index 0000000000..151333eb49 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/application_role/index.html @@ -0,0 +1,108 @@ +--- +title: 'ARIA: application ロール' +slug: Web/Accessibility/ARIA/Roles/Application_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Application_Role +--- +<p>\{{ariaref}}<span class="seoSummary"><code>application</code> ロールは、要素とその全ての子要素をデスクトップアプリケーションと同様に扱うべきであり、伝統的な HTML 解釈テクニックを使用するべきでないと支援技術に指示します。 このロールは、とても動的でデスクトップ的なウェブアプリケーションを定義するためにのみ使用するべきです。</span></p> + +<pre class="brush: html"><div role="application">...</div> +</pre> + +<p>これは、デスクトップアプリケーションの一部であるように、この <code><div></code> 要素とその全ての子孫を処理することを定義します。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>application</code> ロールは、支援技術に対して、ウェブコンテンツのこの部分に、他の既知の HTML 要素や WAI-ARIA ウィジェットに適合しない要素が含まれていることを示します。 HTML 構造やウィジェットの特別な解釈は一切中止し、マウスやキーボード、タッチのインタラクションを扱うためには、コントロールをブラウザーやウェブアプリケーション（web application）に完全に渡すべきです。</p> + +<p>このモードでは、ウェブ作成者は、キーボード入力、フォーカス管理、その他のインタラクションを全て処理する責任があり、支援技術が最終的に何らかの処理を行うとは想定できません。</p> + +<p><code>application</code> ロールに包まれるウェブアプリケーションに、通常のウェブコンテンツと同様に扱われるべき部分が含まれている場合は、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></code> ロールや <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code> ロールを使用するべきです。</p> + +<h3 id="Background" name="Background">背景</h3> + +<p>歴史的な理由で、特に Windows 上では、スクリーンリーダーやその他の支援技術（AT）は、従来、読み込みが完了した後に、ブラウザーからウェブコンテンツ全体を一度に取得していました。 AT は、視覚障害者がコンテンツを消費するのに最も合理的な表現を独自に構築します。 これは、仮想ドキュメント、ブラウズモード、または類似の用語で呼ばれることがよくあります。 ドキュメントは単一列のビューに合理化されます。 キーボードインタラクションモデルが生成され、これはワードプロセッサにとても似ていて、このモデルでは、行単位、文単位、段落単位で読むことができます。 AT は、リンク、見出し、フォームコントロール、テーブル、リスト、画像のような任意の意味論を読みます。</p> + +<p>さらに、長年にわたり、いわゆるクイックナビゲーションキーのセットが確立されているため、視覚障害者は特定の要素タイプを介してページを見ることができます。 このような要素には、通常、見出し、フォームフィールド、リスト、テーブル、リンク、グラフィック、ランドマークリージョンが含まれます。</p> + +<p>この全てがうまくいくためには、AT はほぼ全てのキーボード入力を遮り、それを消費し、ブラウザーや他のユーザエージェントに何も送られないようにします。 ウェブページとインタラクションできるように、特定のキー（通常は <kbd>Enter</kbd> キー）を押すと、このモードはオフになり、標準的なウィジェットのセットが認識されます。 フォームモードやフォーカスモードとも呼ばれるスクリーンリーダーモードでは、全てのキーボード入力がブラウザーに再び送られます。 <kbd>Esc</kbd> キーはブラウズモードに切り替える最も一般的な方法です。</p> + +<p><code>application</code> ロールは、ウェブコンテンツとインタラクションするためにブラウズモードとフォーカスモードの両方を使用する AT において、直接的なインタラクションでアクセス可能な標準的なセットの一部ではないウィジェットのための手段を提供するように設計されています。</p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></code>, <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code></dt> + <dd>通常のウェブコンテンツとして扱われるべきアプリケーションの部分を示すために使用します。</dd> + <dt>aria-activedescendant</dt> + <dd>アプリケーション内でのフォーカスの管理に使用します。</dd> + <dt>aria-label</dt> + <dd>公開されているアプリケーションの名前やウィジェットの目的を提供するために使用します。</dd> + <dt>aria-describedby</dt> + <dd>この要素をナビゲートまたは操作するための追加の説明書を含む要素の <code>id</code> 参照を示すのに使用します。</dd> + <dt>aria-roledescription</dt> + <dd>スクリーンリーダーが話すために、アプリケーションにもっと説明的なロールのテキストを与えるために使用します。 これはローカライズするべきです。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>キーボードインタラクションは、完全にウェブ制作者のコントロール下にあり、実装されている特定のウィジェットに関連するものでもかまいません。 例えば、スライドアプリケーションでは、矢印キーを使用してスライド上の要素を配置し、ARIA のライブリージョンを介して音声によるフィードバックを使用して位置や他のオブジェクトとのオーバーラップの状態を伝えるウィジェットを作成できます。 フォーカスは、<code>aria-activedescendant</code> によって管理します。</p> + +<p><kbd>Tab</kbd> キー、<kbd>スペース</kbd>キー、<kbd>Enter</kbd> キー、および <kbd>Esc</kbd> キーは、アプリケーションで処理する必要があります。 1つの例外は、フォーカスが、ブラウザーからのキーボードナビゲーションをサポートするアプリケーション内の標準ウィジェット（例えば {{htmlelement("input")}} 要素）に設定されている場合です。</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> + <dt>keyPress</dt> + <dd>キーボード入力の処理とフォーカスの制御に使用する。</dd> + <dt>Click, Touch</dt> + <dd>あなたのウィジェットにも適切に対処してください。</dd> + <dt>Changing attribute values</dt> + <dd><code>aria-activedescendant</code> は、アプリケーションコンテナ内のフォーカスを管理するために使用されます。 フォーカスやインタラクションのポイントを変更するキーボードやその他のアプリケーションのイベントに応じて設定します。</dd> +</dl> + +<div class="note"> +<p><code>application</code> ロールには、関連する HTML ウィジェットがないため、完全に自由形式です。 アプリケーションの作成者は、ユーザーがフォーカスのリンボに拘束されたり、ユーザーが抜け出せないものの中にフォーカスを閉じ込められたりしないようにするために全面的な責任を負う必要があります。 ページの他の部分で通常のウェブコンテンツに戻ることを含む、インタラクションの全ての側面を処理する必要があります。 賢明に、そして慎重に使用してください！</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>application</code> ロールを適切に使用するいくつかの有名なウェブアプリケーションは次のとおりです。</p> + +<ul> + <li>グーグルの Docs、Sheets、Slides</li> + <li>CKEditor と TinyMCE の WYSIWYG ウェブエディタは、Mozilla Developer Network で使用されているようなものです。</li> + <li>Gmail の一部（訳注：<a href="https://www.marcozehe.de/2012/02/06/if-you-use-the-wai-aria-role-application-please-do-so-wisely/">グーグルから使っていないという情報あり</a>）</li> +</ul> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p><code>application</code> ロールを不適切に使用すると、意図せずにウェブページの情報からのアクセスを奪う可能性があるので、使用には十分注意してください。 あなたが実際にそれを必要とし、他の既知のウィジェットのセットを使うことができない場合に、真剣に考えます。 使用する場合は、<code>application</code> ロールは、例えば <code><body></code> 要素ではなく、可能な最も低い共通コンテナに追加するべきです。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#application","application")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Precedence_order" name="Precedence_order">優先順位</h2> + +<p><code>application</code> ロールを適用すると、この要素の全ての子孫要素がウェブコンテンツではなくアプリケーションコンテンツのように扱われます。 支援技術がウェブコンテンツに与えるであろう読み上げメカニズムは適用されません。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://www.marcozehe.de/2012/02/06/if-you-use-the-wai-aria-role-application-please-do-so-wisely/">WAI-ARIA のロール "application" を使用する場合は、賢明にしてください</a> — Marco Zehe のブログ記事（英語）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/article_role/index.html b/files/ja/web/accessibility/aria/roles/article_role/index.html new file mode 100644 index 0000000000..9381ee3b24 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/article_role/index.html @@ -0,0 +1,114 @@ +--- +title: 'ARIA: article ロール' +slug: Web/Accessibility/ARIA/Roles/Article_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Article_Role +--- +<p class="summary">\{{ariaref}}<span class="seoSummary"><code>article</code> ロールは、ページ、ドキュメント、またはウェブサイト上で容易に自立することができるページのセクションを示します。 これは、通常、コメント、フォーラム投稿、新聞記事、または1ページにまとめられたその他項目などの関連コンテンツの項目に設定します。</span></p> + +<pre class="brush: html"><div role="article"> +<h2>この断片の見出し</h2> +<p>この断片の段落。</p> +<p>別の段落。</p> +... 記事とインタラクションしたり、共有したり等するためのコントロール ... +</div> +<div role="article"> ... </div> +</pre> + +<p>この例では、1ページに2つの記事を並べて表示しています。 これらは同じように構成でき、関連しています。</p> + +<div class="note"> +<p><code>article</code> ロールを持つ <code><div></code> ではなく、<code><article></code> 要素を使用します。 利用可能な場合は、いつでもネイティブの要素を使用します。</p> +</div> + +<p><code>role="article"</code> を使用する代わりに、{{htmlelement("article")}} 要素を使用することができます。</p> + +<pre class="brush: html"><article> +<h2>この断片の見出し</h2> +<p>この断片の段落。</p> +<p>別の段落。</p> +... 記事とインタラクションしたり、共有したり等するためのコントロール ... +</article> +<article> ... </article> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>article</code> ロールは、ドキュメント、ページ、サイトのセクションを表し、それが単独で存在する場合は、完全なドキュメント、ページ、サイトとして見ることができます。 一連の記事（article）セクションの目的は、互いの関係を示すことです。</p> + +<p>記事は、ナビゲーションに関するランドマークとは見なされませんが、ランドマークをサポートする多くの支援技術は、記事間をナビゲートする手段をサポートします。 また、記事内のネスト関係の表示をサポートすることもあります。</p> + +<p>記事をネストすることができ、ネストされた記事は、それをネストしているものと直接関係しますが、必ずしもネスト階層の外側にあるものとは限りません。 具体的な使用事例については、例を参照してください。</p> + +<p>記事がフィード（feed）の一部である場合、<code>aria-posinset</code> 属性および <code>aria-setsize</code> 属性を設定して、この特定の記事が表すフィード内の位置を示すことができます。</p> + +<p>スクリーンリーダーやその他の支援技術がパススルーモードになるような <code>application</code> やその他のウィジェット内では、記事を使用して、囲んだコンテンツを通常のウェブコンテンツとして扱うように切り替えるべきであることを示すことができます。</p> + +<p>意味論のない要素に <code>article</code> ロールを含める代わりに、{{htmlelement("article")}} 要素を使用するべきです。 ユーザーエージェントは、これを <code>article</code> ロールのような適切なアクセシビリティ情報に変換します。 <code><article></code> 要素を使用すると、検索エンジンがページの構造をよりよく検出できるようになります。 <code>role="article"</code>、または好ましくは <code><article></code> の適切な使用例には、ブログ投稿、フォーラム投稿、フォーラムまたはブログ投稿へのコメント、フォーラムまたはブログ投稿へのコメントへのコメント、ソーシャルメディアフィード内の項目等が含まれます。</p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt>aria-posinset</dt> + <dd>フィードのコンテキストでは、1から始まるカウントに基づいて、そのフィード内のこの特定の記事の位置を示します。</dd> + <dt>aria-setsize</dt> + <dd>フィードのコンテキストでは、そのフィード内にいくつの記事の項目があるかを示します。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>このロールは、具体的なキーボードインタラクションをサポートしていません。</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> + <dt>イベントハンドラ</dt> + <dd>このロールでは、イベントハンドラは必要ありません。</dd> + <dt>属性値の変更</dt> + <dd>フィードを作成するときは、各 <code>article</code> ロールの <code>aria-posinset</code> 属性と <code>aria-setsize</code> 属性を適切な値に設定します。 <code>aria-posinset</code> は、1ベースであることに注意してください。</dd> +</dl> + +<div class="note"> +<p>常にネイティブの要素を使用してください。 <code>article</code> ロールを持つ <code><div></code> ではなく、{{htmlelement("article")}} 要素を使用するべきです。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<ul> + <li>WAI-ARIA Authoring Practices 1.1 の feed のデザインパターンから、<a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/feed/feedDisplay.html">レストランの推奨フィード表示</a>とそれと分けられた<a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/feed/feed.html">ドキュメント</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#article","article")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#feed","feed")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Precedence_order" name="Precedence_order">優先順位</h2> + +<p>このロールは、HTML の {{htmlelement("article")}} 要素に対応し、可能な場合はその要素を代わりに使用するべきでます。 このロールは、その子の間に具体的なロールが存在する必要はありません。 これは、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Feed_Role">feed</a></code> ロールを持つ要素の直接の子として許可される唯一のロールです。</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Feed_Role">feed ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Section_Role">section ロール</a></li> + <li>{{htmlelement("article")}} 要素</li> + <li><a href="/ja/docs/Web/RSS/Article">RSS の Article</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/banner_role/index.html b/files/ja/web/accessibility/aria/roles/banner_role/index.html new file mode 100644 index 0000000000..156371cecc --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/banner_role/index.html @@ -0,0 +1,97 @@ +--- +title: 'ARIA: banner ロール' +slug: Web/Accessibility/ARIA/Roles/Banner_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Banner_role +--- +<p class="summary">\{{ariaref}} <span class="seoSummary"><code>banner</code> ロールは、ページの先頭に頻繁に配置される一般的で有益なコンテンツを表します。 これには、通常、ロゴ、会社名、検索アイコン、ページに関連する写真、またはスローガンが含まれます。 </span></p> + +<pre class="brush: html"><div role="banner"> + <img src="companylogo.svg" alt="会社名"> + <h1>タイトル<h1> + <h2>サブタイトル</h2> +</div></pre> + +<p>HTML5 の {{htmlelement("header")}} 要素は、{{htmlelement("aside")}}、{{htmlelement("article")}}、{{htmlelement("main")}}、{{htmlelement("nav")}}、または {{htmlelement("section")}} の子孫でない限り、<code>banner</code> ランドマークと同じ意味を持ちます。</p> + +<ul> +</ul> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>banner</code> ランドマークロールは、それが適用されたコンテナ要素をヘッダーに変換します。 これは、一般的に全ページ上部にあるサイト全体共通のサイトヘッダーのコンテンツ用に予約されているべきです。</p> + +<p>バナー（banner）には、通常ロゴやコーポレートアイデンティティ、おそらくサイト固有の検索ツールが含まれており、一般的にマーケティングチームがサイトのヘッダーやトップバナーと呼ぶものです。 {{htmlelement("header")}} 要素技術がそのバナーで使用されていない場合は、支援技術に対して <code>banner</code> ランドマーク（landmark）を定義するために、<code>role="banner"</code> の宣言を使用するべきです。</p> + +<p>支援技術は、{{htmlelement("body")}} 要素の子孫であり、<code><article></code>、<code><aside></code>、<code><main></code>、<code><nav></code> または <code><section></code> サブセクション内にネストされていない場合、バナーとしてページのメイン <code><header></code> 要素を識別できます。</p> + +<p>各ページに <code>banner</code> ランドマークを持っていてもかまいませんが、各ページは <code>banner</code> ロールを持つ1つの <code><header></code> に限定するべきです。 ネストされた <code>document</code> ロールおよび/または <code>application</code> ロールを含むページの場合、ネストされたそれぞれの <code>document</code> ロールや <code>application</code> ロールは、1つの <code>banner</code> ランドマークを持っていてもかまいません。 ページに複数の <code>banner</code> ランドマークが含まれている場合は、それぞれに固有のラベルを付けるべきです。</p> + +<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3> + +<p>無し</p> + +<h3 id="Keyboard_interactions" name="Keyboard_interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>無し</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>ここでは、ナビゲーションへ飛ぶリンク、ロゴ、タイトル、サブタイトルを含む簡単なバナーがあります。 これがサイトのメインヘッダーであるため、<code>banner</code> ランドマークロールをコンテナ要素に追加しました。</p> + +<pre class="brush: html"><div role="banner"> + <a href="#nav" id="skipToMenu" class="skiptocontent">キーボードナビゲーションへ飛ぶ</a> + <img src="images/w3c.png" alt="W3C ロゴ"> + <h1>ARIA ランドマーク</h1> + <p>容易なナビゲーションのためのページのサブセクションの特定</p> +</div></pre> + +<p>また、上記の HTML の <code><header></code> 要素で記述することもできます。</p> + +<pre class="brush: html"><header> + <a href="#nav" id="skipToMenu" class="skiptocontent">キーボードナビゲーションへ飛ぶ</a> + <img src="images/w3c.png" alt="W3C ロゴ"> + <h1>ARIA ランドマーク</h1> + <p>容易なナビゲーションのためのページのサブセクションの特定</p> +</header></pre> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p><code><header></code> 要素を使用して、ページの任意のサブセクションの子孫でないことを保証するのが最善ですが、場合によっては基になる HTML にアクセスできません。 この場合、JavaScript を使用してページのメインヘッダーに <code>banner</code> ロールを追加できます。 この方法でページのバナーを特定すると、サイトのアクセシビリティが向上します。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#banner","ARIA: banner role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_banner","Banner landmark role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>HTML {{htmlelement("header")}} 要素</li> + <li><a href="https://w3c.github.io/aria-practices/examples/landmarks/banner.html">WC3 Landmarks Example</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/cell_role/index.html b/files/ja/web/accessibility/aria/roles/cell_role/index.html new file mode 100644 index 0000000000..05813316b2 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/cell_role/index.html @@ -0,0 +1,199 @@ +--- +title: 'ARIA: cell ロール' +slug: Web/Accessibility/ARIA/Roles/Cell_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Cell_Role +--- +<div>\{{ariaref}}</div> + +<p>ARIA の <code>role</code> 属性の <code>cell</code> 値は、要素を列ヘッダーや行ヘッダーの情報を含まない表形式コンテナ内のセルとして識別します。 サポートされるには、セルが <code>row</code> ロールを持つ要素内にネストされている必要があります。</p> + +<pre class="brush: html"><div role="row"> + <span role="cell">フランス</span> + <span role="cell">6700 万</span> +</div> +</pre> + +<p>上のセルの書き方より良い、より意味のある方法は、意味論的な <code><td></code> 要素を使うことでしょう。</p> + +<pre class="brush: html"><tr role="row"> + <td role="cell">フランス</td> + <td role="cell">6700 万</td> +</tr> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>role="cell"</code> を持つ要素は、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></code> 内の、<code>row</code> 内のセル（オプションで <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code> 内のセル）であり、静的な表形式の構造内にあります。 可能であれば、ネイティブな <a href="/ja/docs/Web/HTML/Element/td">HTML <code><td></code></a> 要素を使用することを強く推奨します。</p> + +<p><code>role="row"</code> を持つコンテナ要素内に、<code>role="cell"</code> を持つ各要素をネストしなければなりません（MUST）。 この行（<code>row</code>）は、<code>role="rowgroup"</code> を持つ要素内にネストすることができ、<code>grid</code>、<code>table</code>、<code>treegrid</code> 内にネストするべきです。 セルに列ヘッダーまたは行ヘッダーの情報が含まれている場合は、それぞれ <code>colheader</code> ロールや <code>rowheader</code> ロールを使用します。 セルにヘッダー情報が含まれておらず、<code>grid</code> や <code>treegrid</code> にネストされている場合、<code>gridcell</code> ロールがより適切な場合があります。</p> + +<p>セルには、<code>aria-colindex</code>、<code>aria-colspan</code>、<code>aria-rowindex</code>、<code>aria-rowspan</code> など、表形式データ構造内のセルの位置を明確にする多数のプロパティ属性を含めることができます。</p> + +<div class="note"> +<p>可能であれば、ネイティブな HTML 表要素（<code><table></code>）を、表の行要素（<code><tr></code>）および表のセル要素（<code><td></code>）と共に使用することを強く推奨します。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<h4 id="Context_Roles" name="Context_Roles">コンテキストロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">role="row"</a></dt> + <dd><code>role="row"</code> の要素は、表形式の構造内のセルの行です。 行には、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></code> 内において1つ以上のセル、グリッドセル、列ヘッダー、行ヘッダーが含まれます。 オプションで <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code> 内にも含まれます。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">role="rowgroup"</a></dt> + <dd>行はセルの親として必須です。 行グループ（<code>rowgroup</code>）は、オプションのコンテキスト上の行の親で、子孫となる行との間に関係を確立します。 これは、HTML 表要素の <code>thead</code>、<code>tfoot</code>、<code>tbody</code> 要素と構造的に同等です。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">role="table"</a></dt> + <dd><code>grid</code> と <code>treegrid</code> と共に3つの可能なコンテキストのうちの1つで、セルを含む行が見つかります。 表（<code>table</code>）は、セルを、ネイティブな <code><table></code> HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部として識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">role="grid"</a></dt> + <dd><code>table</code> と <code>treegrid</code> と共に3つの可能なコンテキストのうちの1つで、セルとグリッドセル（<code>gridcell</code>）を含む行が見つかります。 グリッド（<code>grid</code>）は、セルを、ネイティブな <code><table></code> HTML 要素と同様に、行と列に配置されたデータを含む対話型の可能性のある表構造の一部として識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridtree_Role">role="treegrid"</a></dt> + <dd><code>grid</code> に似ていますが、<code>tree</code> と同じ方法で展開や折りたたみができる行があります。</dd> +</dl> + +<h4 id="Subclass_Roles" name="Subclass_Roles">サブクラスロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">role="gridcell"</a></dt> + <dd><code>grid</code> や <code>treegrid</code> 内の行内のセル。</dd> + <dt>role="columnheader"</dt> + <dd>列スコープを持つ HTML <code><th></code> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、<code>columnheader</code> ロールは、対応する列の全てのセルとの関係を確立します。</dd> + <dt>role="rowheader"</dt> + <dd>行スコープを持つ HTML <code><th></code> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、<code>rowheader</code> ロールは、対応する行の全てのセルとの関係を確立します。</dd> +</dl> + +<h4 id="States_and_Properties" name="States_and_Properties">ステートとプロパティ</h4> + +<dl> + <dt>aria-colspan 属性</dt> + <dd>HTML の <code><th></code> と <a href="/ja/docs/Web/HTML/Element/td"><code><td></code> 要素の <code>colspan</code> 属性</a>と同様に、セルにまたがる列数を定義します。</dd> + <dt>aria-rowspan 属性</dt> + <dd>HTML の <code><th></code> と <a href="/ja/docs/Web/HTML/Element/td"><code><td></code> 要素の <code>rowspan</code> 属性</a>と同様に、セルにまたがる行数を定義します。</dd> + <dt>aria-colindex 属性</dt> + <dd> + <p><code>aria-colindex</code> 属性は、列が DOM から隠されている場合にのみ必要です。 この属性は、値として 1 と <code>table</code>、<code>grid</code>、<code>treegrid</code> 内の全列数の間の整数をとります。 <code>aria-colindex</code> は、行内の全列数に対する要素の列インデックスまたは位置を定義します。 全ての列が DOM 内にある場合、この属性は必要ありません。</p> + </dd> + <dt>aria-rowindex 属性</dt> + <dd> + <p><code>aria-rowindex</code> 属性は、行が DOM から隠されている場合にのみ必要です。 現在のセルが入っている全行のリストの行を示します。 この属性は、値として 1 と <code>table</code>、<code>grid</code>、<code>treegrid</code> 内の全行数の間の整数をとり、セルの位置またはインデックスを示します。 たとえば、最初のヘッダーの最初の行のセルは <code>aria-rowindex="1"</code> と設定され、47 行目のセルは、DOM 内に全ての行が存在しないために <code>aria-rowindex</code> が必要な場合は、<code>aria-rowindex="47"</code> となるでしょう。 表示されている行が連続していて、<code>colspan</code> や <code>rowspan</code> が 1 より大きいセルがない場合、このプロパティは行の全てのセルの代わりに親の行に追加できます。</p> + + <p> </p> + </dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> +</dl> + +<p>ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能であれば、ARIA の <code>cell</code> ロールの代わりに HTML の <code><td></code> 要素を使用してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre><div role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <div id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader" aria-sort="none" aria-rowindex="1">ARIA のロール</span> + <span role="columnheader" aria-sort="none" aria-rowindex="1">意味論的な要素</span> + </div> + </div> + <div role="rowgroup"> + <div role="row"> + <span role="cell" aria-rowindex="11">header</span> + <span role="cell" aria-rowindex="11">h1</span> + </div> + <div role="row"> + <span role="cell" aria-rowindex="16">header</span> + <span role="cell" aria-rowindex="16">h6</span> + </div> + <div role="row"> + <span role="cell" aria-rowindex="18">rowgroup</span> + <span role="cell" aria-rowindex="18">thead</span> + </div> + <div role="row"> + <span role="cell" aria-rowindex="24">term</span> + <span role="cell" aria-rowindex="24">dt</span> + </div> + </div> +</div> +</pre> + +<p>上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 全ての行が DOM 内にあるわけではないので、全てのセルに <code>aria-rowindex</code> プロパティを追加しました。 複数の行や列にまたがるセルがない場合、<code>aria-rowindex</code> は行の個々のセルではなく行に配置されている可能性があります。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>データ表構造には、<code>table</code>、<code>tbody</code>、<code>thead</code>、<code>tr</code>、<code>th</code>、<code>td</code> などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA の <code>table</code> ロールの関連するユースケースは、<a href="/ja/docs/Web/CSS/display#Accessibility_concerns">display: grid など、CSS の display プロパティ</a>によって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の <code>table</code> ロールを使用して意味論を戻すことができます。</p> + +<pre><table role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <caption id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</caption> + <thead role="rowgroup"> + <tr role="row"> + <th role="columnheader" aria-sort="none" aria-rowindex="1">ARIA のロール</th> + <th role="columnheader" aria-sort="none" aria-rowindex="1">意味論的な要素</th> + </tr> + </thead> + <tbody role="rowgroup"> + <tr role="row"> + <td role="cell" aria-rowindex="11">header</td> + <td role="cell" aria-rowindex="11">h1</td> + </tr> + <tr role="row"> + <td role="cell" aria-rowindex="16">header</td> + <td role="cell" aria-rowindex="16">h6</td> + </tr> + <tr role="row"> + <td role="cell" aria-rowindex="18">rowgroup</td> + <td role="cell" aria-rowindex="18">thead</td> + </tr> + <tr role="row"> + <td role="cell" aria-rowindex="24">term</td> + <td role="cell" aria-rowindex="24">dt</td> + </tr> + </tbody> + </table></pre> + +<p>上記は表を書く意味論的な方法です。 表のネイティブな意味論の場合、ARIA のロールは必要ありません。 したがって、<a href="/ja/docs/Web/CSS/display#Accessibility_concerns">display プロパティ</a>などで表の行は変更されていません。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>無し</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#cell","ARIA Cell Role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#cell","ARIA Cell Role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">role="gridcell"</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">role="rowheader"</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Colheader_Role">role="colheader"</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">role="row"</a></li> + <li><a href="/ja/docs/Web/HTML/Element/td">HTML <td> 要素</a></li> + <li><a href="/en-US/docs/Web/HTML/Element/th">HTML <th> 要素</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/complementary_role/index.html b/files/ja/web/accessibility/aria/roles/complementary_role/index.html new file mode 100644 index 0000000000..ff7fe74363 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/complementary_role/index.html @@ -0,0 +1,114 @@ +--- +title: 'ARIA: complementary ロール' +slug: Web/Accessibility/ARIA/Roles/Complementary_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Complementary_role +--- +<p>\{{ariaref}}<span class="seoSummary"><code>complementary</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、メインコンテンツに関連する補助セクションを指定するために使用され、しかも分離しても単独で成り立つことができます。 これらのセクションは、サイドバーやコールアウトボックスとして表示されることがよくあります。 可能であれば、代わりに HTML の {{htmlelement("aside")}} 要素を使用してください。</span></p> + +<pre class="brush: html"><div role="complementary"> + <h2>私たちのパートナー</h2> + <!-- 補完的なセクションのコンテンツ --> +</div> +</pre> + +<p>これはイベントのスポンサーへのリンクを含むサイドバーです。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>complementary</code> ロールは<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマーク（landmark）は、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 <code>complementary</code> ランドマークロールを持つコンテナ内にリストされたコンテンツは、文書のメインのコンテンツから分離されている場合でも意味をなすべきです。</p> + +<div class="note"> +<p>{{htmlelement("aside")}} 要素を使用すると、自動的にセクションが <code>complementary</code> ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><div role="complementary"> + <h2>トレンド記事</h2> + <ul> + <li><a href="#">あなたがすべての気分を感じさせる18のツイート</a></li> + <li><a href="#">私は完璧な昼食用の容器を見つけたので、それを探すのを停止する</a></li> + <li><a href="#">最終的に私たちがこれらの食品と呼ぶべきものを決定する時が来た</a></li> + <li><a href="#">Tumblr で今週見た17の本当に良い投稿</a></li> + <li><a href="#">10の親のハック、私たちはそれらを試したので、働くことを知っている</a></li> + </ul> + </div> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> + +<p>{{htmlelement("aside")}} 要素を使用すると、自動的にセクションが <code>complementary</code> ロールを持つことを伝えます。 可能であれば、それを代わりに使用することをお勧めします。</p> + +<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> + +<h4 id="Multiple_landmarks" name="Multiple_landmarks">複数のランドマーク</h4> + +<p>文書に複数の <code>complementary</code> ランドマークロールや {{htmlelement("aside")}} 要素がある場合は、各ランドマークに <code>aria-label</code> 属性を使用してラベルを付けるか、それらに適切な説明的なタイトルがある場合は、<code>aria-labelledby</code> 属性を使用してそれを指してください。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解できるようになります。</p> + +<pre class="brush: html"><aside aria-label="使用上の注意"> + <!-- コンテンツ --> +</aside> + +... + +<aside id="sidebar" aria-label="スポンサー"> + <!-- コンテンツ --> +</aside> +</pre> + +<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> + +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、 <code>aria-label="サイドバー"</code> の <code>role="complementary"</code> の宣言は、"complementary サイドバー" として重複してアナウンスすることができます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーはドキュメントの大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#complementary","ARIA: Complementary role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_complementary","Complementary landmark role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("aside")}}: 余談要素</li> + <li><a href="https://www.w3.org/TR/wai-aria/#complementary">complementary (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="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/aside-revisited/">Aside Revisited | HTML5 Doctor</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/contentinfo_role/index.html b/files/ja/web/accessibility/aria/roles/contentinfo_role/index.html new file mode 100644 index 0000000000..3f61014940 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/contentinfo_role/index.html @@ -0,0 +1,147 @@ +--- +title: 'ARIA: contentinfo ロール' +slug: Web/Accessibility/ARIA/Roles/Contentinfo_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Contentinfo_role +--- +<div>\{{ariaref}}</div> + +<p><code>contentinfo</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、著作権情報、ナビゲーションリンク、プライバシーステートメントなど、ウェブサイトの各ページの最後に繰り返される情報を識別するために使用されます。 このセクションは一般的にフッターと呼ばれます。</p> + +<pre class="brush: html"><div role="contentinfo"> + <h2>フッター</h2> + <!-- フッターのコンテンツ --> +</div> +</pre> + +<p>これはウェブサイトのフッターです。 代わりに {{htmlelement("footer")}} 要素を使用することをお勧めします。</p> + +<pre class="brush: html"><footer> + <h2>フッター</h2> + <!-- フッターのコンテンツ --> +</footer> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>contentinfo</code> ロールは、ページフッターを識別するための<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマーク</a>です。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 ページには、1ページあたり1つのトップレベルの <code>contentinfo</code> ランドマークロールのみが含まれているべきです。</p> + +<p>各ページには、{{htmlelement("footer")}} 要素を使用するか、または <code>role="contentinfo"</code> を宣言することによって作成された <code>contentinfo</code> ランドマークが1つだけ含まれているべきです。 {{htmlelement("iframe")}} 要素を介して埋め込まれたコンテンツに存在する <code>contentinfo</code> ランドマークは、この制限に含まれません。</p> + +<div class="note"> +<p>{{htmlelement("footer")}} 要素を使用すると、自動的にセクションに <code>contentinfo</code> ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきで、確実に VoiceOver の<a href="/ja/docs/Web/HTML/Element/footer#Accessibility_concerns">既知の問題をテスト</a>してください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre><span class="tag"><body> + + </span><!-- 他のページのコンテンツ --> + +<span class="tag"> <div role="contentinfo"> + <h2>MDN Web Docs</h2> + <ul> + <li><a href="#"></span>ウェブ技術<span class="tag"></a></li> + <li><a href="#"></span>ウェブ開発について学ぶ<span class="tag"></a></li> + <li><a href="#"></span>MDN について<span class="tag"></a></li> + <li><a href="#"></span>フィードバック<span class="tag"></a></li> + </ul> + <p></span>© 2005-2018 Mozilla および各貢献者 コンテンツは <a href="#">これらのライセンス</a> の下で公開されています。<span class="tag"></p></span> +<span class="tag"> </div> +</body></span> +</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> + +<h3 id="One_contentinfo_landmark_per_page" name="One_contentinfo_landmark_per_page">ページあたり1つの <code>contentinfo</code> ランドマーク</h3> + +<h4 id="The_<body>_element" name="The_<body>_element"><code><body></code> 要素</h4> + +<p>{{htmlelement("body")}} 要素の直接の子孫として使用される文書ごとに1つの <code>contentinfo</code> ランドマークが存在するべきです。</p> + +<h4 id="Mega-footers" name="Mega-footers">メガフッター</h4> + +<p>文書のフッターの中に追加の {{htmlelement("footer")}} 要素や <code>contentinfo</code> ランドマークを入れ子にしないでください。 代わりに、他の<a href="/ja/docs/Web/HTML/Element#Content_sectioning">コンテンツセクショニング要素</a>を使用してください。</p> + +<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> + +<h4 id="Multiple_landmarks" name="Multiple_landmarks">複数のランドマーク</h4> + +<p>文書に複数の <code>contentinfo</code> ランドマークロールや {{htmlelement("footer")}} 要素がある場合は、各ランドマークの <code>aria-label</code> 属性でラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。</p> + +<pre class="brush: html"><body> + + ... + + <article> + <h2>毎日パッタイ</h2> + <!-- 記事のコンテンツ --> + <footer aria-label="毎日パッタイのメタデータ"> + <p><a href="#">リサ</a>によって<time datetime="2018-09-23 12:17">5月16日</time>に投稿されました。</p> + </footer> + </article> + + ... + + <footer aria-label="フッター"> + <!-- フッターのコンテンツ --> + </footer> +</body></pre> + +<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> + +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>aria-label="フッター"</code> の <code>role="contentinfo"</code> の宣言は、"contentinfo フッター" として重複してアナウンスすることができます。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> + +<p>{{htmlelement("body")}} 要素の直接の子孫である場合、{{htmlelement("footer")}} 要素を使用すると、自動的にセクションが <code>contentinfo</code> ロールを持つことを伝えます（VoiceOver の<a href="/ja/docs/Web/HTML/Element/footer#Accessibility_concerns">既知の問題</a>は別として）。 可能であれば、代わりに <code><footer></code> を使用することをお勧めします。 <code><article></code>、<code><aside></code>、<code><main></code>、<code><nav></code>、<code><section></code> 内にネストされた <code><footer></code> 要素は、<code>contentinfo</code> とはみなされないことに注意してください。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#contentinfo","contentinfo landmark role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_contentinfo","contentinfo landmark role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("footer")}}: フッター要素</li> + <li><a href="https://www.w3.org/TR/wai-aria/#contentinfo">contentinfo (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="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-footer-element-update/">The Footer Element Update | HTML5 Doctor</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/dialog_role/index.html b/files/ja/web/accessibility/aria/roles/dialog_role/index.html new file mode 100644 index 0000000000..283e1d5042 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/dialog_role/index.html @@ -0,0 +1,166 @@ +--- +title: 'ARIA: dialog ロール' +slug: Web/Accessibility/ARIA/Roles/dialog_role +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/dialog_role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary"><code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog" title="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">dialog</a></code> ロールは、ウェブアプリケーションまたはウェブページの他の部分からコンテンツまたは UI を分離する HTML ベースのアプリケーションのダイアログまたはウィンドウをマークアップするために使用されます。 ダイアログは、通常、オーバーレイを使用してページコンテンツの残りの部分の上に配置されます。 ダイアログは非モーダル（ダイアログの外のコンテンツとやりとりすることは可能です）またはモーダル（ダイアログ内のコンテンツのみがやり取りできる）のいずれかになります。</span></p> + +<pre class="brush: html"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>> + <h2 <strong>id="dialog1Title"</strong>>あなたの個人情報が更新されました</h2> + <p <strong>id="dialog1Desc"</strong>>詳細は、ユーザーアカウントのセクションでいつでも変更できます。</p> + <button>閉じる</button> +</div></pre> + +<h2 id="Description" name="Description">説明</h2> + +<p>ダイアログの要素を <code>dialog</code> ロールと共にマークアップすると、支援技術がダイアログのコンテンツをグループ化し、ページのコンテンツの他の部分から分離されたものとして識別するのに役立ちます。 ただし、<code>role="dialog"</code> だけを追加するだけでは、ダイアログをアクセス可能にするには不十分です。 さらに、次のことを行う必要があります。</p> + +<ul> + <li>ダイアログには適切なラベルを付ける必要があります。</li> + <li>キーボードのフォーカスを正しく管理する必要があります。</li> +</ul> + +<p>以下のセクションでは、これら2つの要件がどのように満たされるかについて説明します。</p> + +<h4 id="Labeling" name="Labeling">ラベリング</h4> + +<p>ダイアログ自体がフォーカスを受け取れる必要はありませんが、それでもラベルを付ける必要があります。 ダイアログに与えられたラベルは、ダイアログ内のインタラクティブコントロールのコンテキスト情報を提供します。 つまり、ダイアログのラベルは、その内部のコントロールのグループラベルのように動作します（<code><legend></code> 要素が <code><fieldset></code> 要素内のコントロールのグループラベルを提供する方法と同様です）。</p> + +<p>ダイアログにすでに表示されているタイトルバーがある場合、そのバーの中のテキストを使用してダイアログ自体にラベルを付けることができます。 これを達成する最善の方法は、<code>role="dialog"</code> 要素に <code>aria-labelledby</code> 属性を使用することです。 さらに、ダイアログにダイアログタイトルの他に説明的なテキストが含まれている場合、このテキストは <code>aria-describedby</code> 属性を使用してダイアログに関連付けることができます。 このアプローチは、次のコードスニペットに示されています。</p> + +<pre class="brush: html"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>> + <h2 <strong>id="dialog1Title"</strong>>あなたの個人情報が更新されました</h2> + <p <strong>id="dialog1Desc"</strong>>詳細は、ユーザーアカウントのセクションでいつでも変更できます。</p> + <button>閉じる</button> +</div></pre> + +<p> </p> + +<div class="note">非仮想モードで動作するスクリーンリーダーが知覚するためには、ダイアログのタイトルと説明のテキストにフォーカスを合わせる必要はありません。 ARIA の dialog ロールとラベリング手法を組み合わせることで、スクリーンリーダーは、フォーカスがダイアログへ移動したときにダイアログの情報をアナウンスするべきです。</div> + +<p> </p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p> </p> + +<h4 id="Focus_management" name="Focus_management">フォーカス管理 </h4> + +<p>ダイアログには、キーボードフォーカスをどのように管理するべきかについての特定の要件があります。</p> + +<ul> + <li>ダイアログには常に少なくとも1つのフォーカス可能なコントロールを持つべきです。 多くのダイアログでは、[閉じる]、[OK]、[キャンセル]などのボタンがあります。 必要なコントロールに加えて、ダイアログには、フォーム全体やタブのような他のコンテナウィジェットも含め、任意の数のフォーカス可能な要素を含めることができます。</li> + <li>ダイアログが画面に表示されたら、キーボードのフォーカス（その制御はダイアログの目的に依存する）を、ダイアログ内のデフォルトのフォーカス可能なコントロールに移動するべきです。 基本的なメッセージのみを提供するダイアログでは、[OK] ボタンになります。 フォームを含むダイアログでは、フォームの最初のフィールドになります。</li> + <li>ダイアログが閉じられた後、キーボードフォーカスは、ダイアログに移動する前の位置に戻すべきです。 それ以外の場合は、フォーカスをページの先頭にドロップすることができます。</li> + <li>ほとんどのダイアログでは、ダイアログのタブ順序がラップすることが予想されます。 つまり、ユーザーがダイアログ内のフォーカス可能な要素をタブで移動すると、最後のものに達した後、最初のフォーカス可能な要素にフォーカスが移ります。 言い換えれば、タブ順序は、ダイアログ内に含まれている必要があります。</li> + <li>ダイアログを移動またはサイズ変更できる場合は、マウスユーザーだけでなくキーボードユーザーもこれらの操作を実行できる必要があります。 同様に、ダイアログがツールバーやコンテキストメニューのような特別な機能を提供する場合、これらはキーボードユーザーが到達可能で操作可能でなければなりません。</li> + <li>ダイアログはモーダルでも非モーダルでもよい。 モーダルダイアログが画面に表示されると、ダイアログの外にあるページコンテンツと対話することはできません。 つまり、モーダルダイアログが表示されている限り、メインアプリケーションの UI またはページコンテンツは一時的に無効になっているとみなされます。 非モーダルダイアログの場合、ダイアログが表示されている間もダイアログの外のコンテンツと対話することは可能です。 非モーダルダイアログでは、開いているダイアログとメインページの間でフォーカスを移動できるグローバルなキーボードショートカットが必要です。 詳細については、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Guides/Managing_Modal_and_Non_Modal_Dialogs">モーダルおよび非モーダルダイアログの管理</a>ガイドを参照してください。</li> +</ul> + +<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><code><span class="highlight-span">aria-labelledby</span></code></dt> + <dd>ダイアログにラベルを付けるには、この属性を使用します。 多くの場合、<code>aria-labelledby</code> 属性の値は、ダイアログのタイトルに使用される要素の ID になります。</dd> + <dt><code>aria-describedby</code></dt> + <dd>この属性を使用して、ダイアログの内容を記述します。</dd> +</dl> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p><code>dialog</code> ロールが使用されるとき、ユーザーエージェントは以下を行うべきです。</p> + +<ul> + <li>オペレーティングシステムのアクセシビリティ API でダイアログとして要素を公開します。</li> +</ul> + +<p>ダイアログが正しくラベル付けされ、フォーカスがダイアログ内のコントロールに移動されると、スクリーンリーダーは、フォーカスされた要素をアナウンスする前にダイアログのアクセシブルロール、名前、および任意で説明をアナウンスするべきです。</p> + +<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h4 id="Example_1_A_dialog_containing_a_form" name="Example_1_A_dialog_containing_a_form">例 1: フォームを含むダイアログ</h4> + +<pre class="brush: html"> <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <h2 id="dialog1Title">加入申込書</h2> + <p id="dialog1Desc">私たちは、この情報を第三者と共有することはありません。</p> + <form> + <p> + <label for="firstName">名</label> + <input id="firstName" type="text" /> + </p> + <p> + <label for="lastName">姓</label> + <input id="lastName" type="text"/> + </p> + <p> + <label for="interests">興味</label> + <textarea id="interests"></textarea> + </p> + <p> + <input type="checkbox" id="autoLogin"/> + <label for="autoLogin">自動ログイン</label> + </p> + <p> + <input type="submit" value="情報を保存する"/> + </p> + </form> + </div></pre> + +<h4 id="Example_2_A_dialog_based_on_a_Fieldset_as_fallback_content" name="Example_2_A_dialog_based_on_a_Fieldset_as_fallback_content">例 2: フォールバックコンテンツとしての fieldset に基づくダイアログ</h4> + +<p>ARIA マークアップをサポートしていないブラウザーや AT 製品をサポートするには、フォールバックコンテンツとして <code>fieldset</code> 要素にダイアログマークアップを適用することもできます。 このようにして、ダイアログのタイトルは正しくアナウンスされます。</p> + +<pre class="brush: html"><strong><fieldset role="dialog"</strong> aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <strong><legend></strong> + <span id="dialog1Title">あなたの個人情報が更新されました。</span> + <span id="dialog1Desc">詳細は、ユーザーアカウントのセクションでいつでも変更できます。</span> + </legend> + + <button>閉じる</button> +</fieldset></pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<ul> + <li><a class="external" href="http://jqueryui.com/demos/dialog/" title="http://jqueryui.com/demos/dialog/">jQuery-UI ダイアログ</a></li> +</ul> + +<h3 id="Notes" name="Notes">注</h3> + +<div class="note"><strong>注</strong>: キーボードユーザーがダイアログの外の要素にフォーカスを移動するのを防ぐことは可能ですが、スクリーンリーダーの仮想カーソルを使用するためにスクリーンリーダーのユーザーは仮想的にそのコンテンツをナビゲートすることができます。 このため、ダイアログは <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Application_Role">application</a></code> ロールの特別なケースとみなされます。 非仮想ナビゲーションモードでは、スクリーンリーダーのユーザーがナビゲートすることが予想されます。</div> + +<ul> +</ul> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#dialog","dialog")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>近日公開</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Alertdiialog_Role">ARIA: alertdialog ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">alertdialog ロールの使用</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/document_role/index.html b/files/ja/web/accessibility/aria/roles/document_role/index.html new file mode 100644 index 0000000000..eb69ada642 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/document_role/index.html @@ -0,0 +1,94 @@ +--- +title: 'ARIA: document ロール' +slug: Web/Accessibility/ARIA/Roles/Document_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Document_Role +--- +<p>\{{ariaref}}<span class="seoSummary">複雑な複合<a href="/ja/docs/Web/Accessibility/ARIA/Roles/widget_Role">ウィジェット</a>や<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Application_Role">アプリケーション</a>で一般的に使用される <code>document</code> ロールは、コンテキストを読み取りモードに切り替えることを支援技術を知らせることができます。 <code>document</code> ロールは、ドキュメントモードを使用して、この要素に含まれるコンテンツを読み取るための読み取りモードまたはブラウズモードを支援技術に指示します。</span></p> + +<pre class="brush: html"><div role="dialog"> + ... + <div id="InfoText" role="document" tabindex="0"> + <p>いくつかの情報テキストがここに入ります。</p> + </div> + ... + <button>閉じる</button> +</div> +</pre> + +<p>この例は、いくつかのコントロールと、支援技術のユーザーがタブを当てて（<kbd>Tab</kbd> キーによる移動で）読むことができる情報テキストを含むセクションを含む<a href="/ja/docs/Web/Accessibility/ARIA/Roles/diialog_Role">ダイアログ</a>ウィジェットを示しています。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p>デフォルトでは、ウェブページはドキュメント（document）として扱われ、支援技術（AT）は、新しいウェブページに入るときブラウズモードまたは読み取りモードにします。 このモードは、ウィジェットロールや <code>application</code> ロールなど、さまざまなロールを通じて変更できます。 <code>document</code> ロールは、AT をブラウズモードまたは読み取りモードに戻します。</p> + +<p>一般に、<code>application</code> ロールまたは他のインタラクティブなウィジェットロール内に配置される <code>document</code> ロールは、利用可能な場合、支援技術のユーザがブラウズモードまたは仮想読み取りモードを使用して読むべきである複雑な複合ウィジェットのセクションを示すために使用します。</p> + +<p>読み取りモードの AT は、ウィジェットロールまたは <code>application</code> ロールのセットを持つ要素を除くすべての要素に対してそのモードをデフォルトとしているため、<code>document</code> ロールは、静的リッチテキストとして読むべきであるウィジェットまたはアプリケーション内のフォーカス可能な要素に対してのみ役に立ちます。 ウィジェット内のテキストを含む要素に <code>role="document"</code> と <code>tabindex="0"</code> を追加すると、スクリーンリーダーのユーザーは <kbd>Tab</kbd> キーを押してドキュメント要素にフォーカスを合わせ、スクリーンリーダーの読み取りカーソルでテキストを読み取ることができます。</p> + +<p>支援技術は、親の動的コンテキストのために再配線されたコントロールを遮り、<kbd>上矢印</kbd>または<kbd>下矢印</kbd>キーボードイベントなどの標準入力イベントを再度有効にして、読み取りカーソルを制御するために、コンテキストをドキュメントモードに戻すべきです。</p> + +<p><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code> ロールとは対照的に、<code>document</code> ロールは、<code>document</code> ロールを持つ他の要素との関係はなく、単にそれ含む複合ウィジェットとの関係を持っています。 記事（article）は関連記事を持つことができます。</p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><code>aria-expanded</code></dt> + <dd>ドキュメント要素が折りたたみ可能である場合は、<code>true</code> または <code>false</code> の値を含み、ドキュメントが現在展開されているか折りたたまれているかを示します。 他の値には、ドキュメントが折りたたまれないことを意味するデフォルトの <code>undefined</code> が含まれます。</dd> +</dl> + +<dl> + <dt><code>tabindex="0"</code></dt> + <dd>支援技術のユーザーがそれにタブを当ててすぐに読むことができるように、それをフォーカス可能にするために使用します。</dd> +</dl> + +<p> </p> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p><code>tabindex="0"</code> 属性/値のペアを設定することで、要素をフォーカス可能にするべきです。 これにより、ユーザーはタブを当てることができ、読み取りモードが自動的に呼び出され、コンテンツをすぐに読むことができます。</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>なし（任意の属性が必要とする場合を除く。 例えば、<code>document</code> が折りたたみ可能である場合、<code>aria-expanded</code> のステートと値を維持する必要があります。）</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>例えば、Gmail と1つの会話ビューがあります。 GMail はウェブアプリケーションです。 Gmail の場合、ほとんどのユーザーエージェントのインタラクションは、ほとんどの場合、アプリケーションによって奪われます。 ただし、会話の件名を含む1つの会話の開始見出しにキーボードフォーカスが設定されている場合、スクリーンリーダーのユーザーは読み取りモードのコマンドを使用してメッセージを読んだり、展開したり、折りたたんだり、彼らがどんなやり方でも操作できるようにします。 Back ボタンをアクティブにするか、関連するキーを押すことによって、フォーカスがメッセージリストに戻ると、直接アプリケーションのインタラクションモードが再度呼び出され、<kbd>矢印</kbd>キーを使用してリスト内の別の会話に移動できます。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p><code>tabindex</code> 属性に値 0 を設定することにより、<code>document</code> ロールを持つ項目がフォーカス可能であることを常に確認します。 これはタブ順にも含まれます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加の利点</h3> + +<p><code>document</code> ロールは、ユーザーが標準のスクリーンリーダーのコマンドで読むべき内容であることを明白に明示することによって、支援技術の動作を間接的に制御する簡単な方法です。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#document","document")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p> </p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/widget_Role">ARIA: widget ロール</a> </li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Application_Role">ARIA: application ロール</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/feed_role/index.html b/files/ja/web/accessibility/aria/roles/feed_role/index.html new file mode 100644 index 0000000000..ca699a87dc --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/feed_role/index.html @@ -0,0 +1,124 @@ +--- +title: 'ARIA: feed ロール' +slug: Web/Accessibility/ARIA/Roles/Feed_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Feed_Role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary">フィード（<code>feed</code>）は動的にスクロール可能な記事（<code>article</code>）のリスト（<code>list</code>）で、ユーザーがスクロールすると記事がリストの両端から追加または削除されます。 <code>feed</code> を使用すると、スクリーンリーダーはブラウズモードの読み取りカーソルを使用して、ユーザーが読むにつれてより多くのコンテンツをロードすることで無限にスクロールし続けることができるリッチコンテンツのストリームを読み、スクロールすることができます。</span></p> + +<pre class="brush: html"><section role="feed" <code><a class="state-reference" href="https://w3c.github.io/aria/#aria-busy">aria-busy=</a>"false"</code>> + ... + <tweet role="article" aria-posinset="427" <code>aria-setsize="-1"</code>>...</tweet> + <tweet role="article" aria-posinset="428" <code>aria-setsize="-1"</code>>...</tweet> + <tweet role="article" aria-posinset="429" <code>aria-setsize="-1"</code>>...</tweet> + ... +</section></pre> + +<h2 id="Description" name="Description">Description</h2> + +<div class="role-description" id="desc-feed"> +<p>フィード（feed）は、スクロール可能な記事（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code>）のリスト（<a href="/ja/docs/Web/Accessibility/ARIA/Roles/list_Role">list</a>）のためのページ構造であり、スクロールすることで、リストの先頭または末尾に記事が追加され、ウェブページと、スクロールインタラクションを制御する支援技術との間の相互運用契約が確立され、ユーザーが記事を読み、記事を前後にジャンプし、読み取りモードで新しい記事を確実にロードするようにします。 例としては、RSS フィード、ニュースフィード、Facebook（フェイスブック）、Instagram（インスタグラム）、Twitter（ツイッター）などのソーシャルメディアフィード、さらには電子商取引ページ上の関連商品のリストなどがあります。 これらのストリームは有限か無限であり、ユーザーがスクロールするにつれてより多くのコンテンツをロードします。 フィードパターンを実装することで、スクリーンリーダーは読み取りモードを維持しながら、確実に読み取り、フィードコンテンツのロードをトリガーすることができます。</p> + +<p> </p> + +<p><code>feed</code> は、コンテナ要素であり、その子は {{htmlelement("article")}} であるか、<code>article</code> ロールを持ちます。 フィード内の各記事は、<code>tabindex</code> が 0 または -1 でフォーカス可能であるべきです。 記事またはその子孫要素にフォーカスが移ったときに、記事をスクロールして表示するべきです。 記事の追加がメインのブラウザースレッドを占有している場合は、フィード自体に <code>aria-busy="true"</code> を設定し、処理が終了したりユーザーに更新が表示されない場合は <code>false</code> に設定し直してください。</p> + +<p>優れたユーザーエクスペリエンスを確保するため、フィードの途中で記事を挿入または削除しないようにし、ユーザーがフィードの終わりに達する前に新しい記事をロードし、記事間でフォーカスを移動するためのキーボードコマンドを提供して、キーボードユーザーがフィード内をナビゲートできるようにします。 下記のキーボードインタラクションを参照してください。<br> + 記事の数がわかっている場合は、記事自体に <code>aria-setsize</code> を設定してください。 ただし、総数が非常に大きい場合、不明確な場合、または頻繁に変わる場合は、<code>aria-setsize="-1"</code> を設定してフィードのサイズがわからないことを示します。</p> + +<p>フィードパターンのもう1つの特徴は、斜め読みです。 フィード内の記事には、<code>aria-label</code> によるアクセス可能な名前と <code>aria-describeby</code> による説明の両方を含めることで、記事をナビゲートするときに、ラベルの後にどの要素を話すべきかをスクリーンリーダーに提案することができます。 タイトルと主要コンテンツを提供する記事内の要素を識別することによって、支援技術は、ユーザが記事から記事へとジャンプし、どの記事がより注目に値するかを効率的に見分けることを可能にする機能を提供できます。</p> + +<p>フィードパターンは、ウェブページと支援技術の間に次の相互運用性に関する合意を確立することによって、信頼できる支援技術の読み取りモードでのインタラクションを可能にします。</p> + +<ol> + <li>フィードのコンテキストでは、ウェブページのコードは次の責任を負います。 + <ul> + <li>どの記事に DOM フォーカスが含まれているかに基づいて、コンテンツを適切に視覚的にスクロールします。</li> + <li>どの記事に DOM フォーカスが含まれているかに基づいて、フィード記事をロードまたは削除する。</li> + </ul> + </li> + <li>フィードのコンテキストでは、読み取りモードを持つ支援技術は次の責任を負います。 + <ul> + <li>記事要素またはその子孫の1つに DOM フォーカスがあることを確認して、どの記事に読み取りカーソルがあるかを示します。</li> + <li>DOM フォーカスを次の記事および前の記事に移動するための読み取りモードキーを提供します。</li> + <li>読み取りカーソルと DOM フォーカスをフィードの終わりを超えてフィードの開始前に移動するための読み取りモードキーを提供します。</li> + </ul> + </li> +</ol> + +<section class="notoc" id="sect1"> +<h3 id="Keyboard_Interaction" name="Keyboard_Interaction">キーボードインタラクション</h3> + +<p>フォーカスがフィード内にある場合は、次のような、または同様のインターフェースをサポートすることをお勧めします。</p> + +<ul> + <li><kbd>Page Down</kbd>: 次の記事にフォーカスを移動します。</li> + <li><kbd>Page Up</kbd>: 前の記事にフォーカスを移動します。</li> + <li><kbd>Control + End</kbd>: フィードの後方で最初にフォーカス可能な要素にフォーカスを移動します。</li> + <li><kbd>Control + Home</kbd>: フィードの前方で最初にフォーカス可能な要素にフォーカスを移動します。</li> +</ul> + +<p>ブログ投稿のフィード内のコメントフィードなど、フィード内にネストしたフィードがある場合の慣例は、<kbd>Tab</kbd> キーでネストしたフィードにタブで移動し、「外側の」記事からその記事内にネストしたフィードの最初の項目に移動するための <kbd>Alt + Page Down</kbd> などの別のキーを提供することです。 メインフィードとネストしたフィードの間をナビゲートするには、<kbd>Control + End</kbd> で内側のフィードから外側のフィードの次の記事にフォーカスを移動します。</p> +</section> + +<section class="notoc" id="sect2"> +<h3 id="WAI-ARIA_Roles_States_and_Properties" name="WAI-ARIA_Roles_States_and_Properties">関連する <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> のロール、ステート、プロパティ</h3> + +<dl> + <dt>aria-label</dt> + <dd>フィードに目に見えるタイトルがない場合、<code>feed</code> 要素には <code><a class="property-reference" href="https://w3c.github.io/aria/#aria-label">aria-label</a></code> で指定されたラベルがあります。 もしそうなら、<code>aria-labelledby</code> を見てください。</dd> + <dt>aria-labelledby</dt> + <dd>フィードに目に見えるタイトルがある場合、<code>feed</code> 要素はタイトルを含む要素を参照する <code><a class="property-reference" href="https://w3c.github.io/aria/#aria-labelledby">aria-labelledby</a></code> を持ちます。 そうでない場合は、<code>aria-label</code> を追加してください。</dd> + <dt>aria-busy</dt> + <dd>記事をフィードに追加または削除しているときなど、忙しい場合は、更新操作中に <code><a class="state-reference" href="https://w3c.github.io/aria/#aria-busy">aria-busy=</a>"true</code>" を設定します。 操作が完了するか、変更が見えなくなる可能性がある場合は、必ず <code>false</code> にリセットしてください。</dd> + <dt>article</dt> + <dd>フィード内のコンテンツの各セクションは、{{htmlelement("article")}} または <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code> ロールを持つ要素に含めるべきです。 各記事（<code>article</code>）は、その記事のタイトルまたは識別ラベルとして役立つその他の子を参照する <code><a class="property-reference" href="https://w3c.github.io/aria/#aria-labelledby">aria-labelledby</a></code> を持つべきです。 各記事は、好ましくは、その記事の主要なコンテンツとして役立つ記事内の１つまたは複数の要素を参照する <code><a class="property-reference" href="https://w3c.github.io/aria/#aria-describedby">aria-describedby</a></code> を持つべきです。 各記事要素は、フィード内の位置を表す値に設定された <code><a class="property-reference" href="https://w3c.github.io/aria/#aria-posinset">aria-posinset</a></code> と、ロードされた記事の総数またはフィード内の総数を表す値のどちらかに設定された <code><a class="property-reference" href="https://w3c.github.io/aria/#aria-setsize">aria-setsize</a></code> を持ちます。 それは、どちらの値がユーザーにとってより役立つかによって異なります。 フィード内の総数がわからない場合は、<code>aria-setsize="-1"</code> を設定してください。</dd> +</dl> +</section> + +<p> </p> +</div> + +<p> </p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>なし（任意の属性が必要とする場合を除く。 例えば、必要に応じて更新操作中に <code>aria-busy</code> を <code>true</code> に設定し、完了したら <code>false</code> に設定します。）</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><a href="https://w3c.github.io/aria-practices/examples/feed/feed.html">フィードパターンの実装例</a>（英語）</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#feed","feed")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>Coming soon</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>HTML {{htmlelement("article")}} 要素</li> + <li><a href="/ja/docs/Web/HTML/Element/ul">HTML のリスト</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">ARIA: article ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/List_Role">ARIA: list ロール</a></li> + <li><cite><a href="https://www.w3.org/TR/wai-aria-practices-1.1/#feed"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Authoring Practices</a></cite> — フィードデザインパターンの実装に関する詳細。（英語）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/figure_role/index.html b/files/ja/web/accessibility/aria/roles/figure_role/index.html new file mode 100644 index 0000000000..f878ae0eaa --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/figure_role/index.html @@ -0,0 +1,148 @@ +--- +title: 'ARIA: figure ロール' +slug: Web/Accessibility/ARIA/Roles/Figure_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Figure_Role +--- +<div>\{{ariaref}}</div> + +<p>ARIA の <code>figure</code> ロールは、適切な意味論が存在しないページコンテンツ内の図表を識別するために使用できます。 図表は、通常、1つまたは複数の画像、コードスニペット、または情報を通常のテキストの流れとは異なる方法で配置するその他のコンテンツとみなされます。</p> + +<pre class="brush: html"><div role="figure" aria-labelledby="caption"> + <img src="image.png" + alt="画像の完全な代替説明"> + <p id="caption">図表 1: キャプション</p> +</div> +</pre> + +<p>上記の例では、画像とキャプションの2つの別々のコンテンツ項目で構成される図表があります。 これは、コンテンツを <code>role="figure"</code> を使用して図表として識別する {{htmlelement("div")}} 要素で囲まれます。</p> + +<p>図表を作成するために ARIA を使用する代わりに、{{htmlelement("figcaption")}} 要素と共に、ネイティブな意味論の HTML {{htmlelement("figure")}} 要素の使用を検討してください。 以下の{{anch("Best practices","ベストプラクティス")}}をご覧ください。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p>一緒にグループ化され、図表（画像、動画、音声、コードスニペット、または他のコンテンツを含む）として消費されるべきコンテンツは、 <code>role="figure"</code> を使用して図表として識別できます。</p> + +<p>図表のコンテンツをどのように書くべきかについての鉄則はありません。 他のコンテンツと同様にアクセス可能であることを確認するべきです。 例えば、支援技術のユーザーがキーボードやマウスなどで操作できることを確認してください。</p> + +<p>図表にキャプションやラベルを追加する場合は、さまざまな方法でキャプションやラベルを追加できます。 図表を説明するコンテンツを含む要素に ID を追加し、図表上の適切な属性でその ID を参照して、次のように図表をラベルに関連付けることができます。</p> + +<pre class="brush: html"><div role="figure" aria-labelledby="figure-1"> + ... + <p id="figure-1">図表を説明するテキスト。</p> +</div></pre> + +<ul> + <li>テキストが簡潔なラベルである場合は、<code>aria-labelledby</code> を使用してください。</li> + <li>テキストがより長い説明である場合は、<code>aria-describedby</code> を使用してください。</li> +</ul> + +<p>ここでも、ARIA 無しで、HTML の {{htmlelement("figure")}} 要素と {{htmlelement("figcaption")}} 要素を使用して、意味論的に行うことができます。</p> + +<pre class="brush: html"><figure> + ... + <figcaption>図表を説明するテキスト。</figcaption> +</figure></pre> + +<ul> +</ul> + +<p>ラベルを画面に表示したくないが、支援技術のユーザーにわかりやすいラベルを提供したい場合は、図表コンテナの <code>aria-label</code> 属性を使用できます。</p> + +<pre class="brush: html"><div role="figure" aria-label="図表を説明するテキスト。"> + ... +</div></pre> + +<p><code>aria-label</code> は <code><figure></code> と一緒に使うことができます。</p> + +<pre class="brush: html"><figure aria-label="図表を説明するテキスト。"> + ... +</figure></pre> + +<p>一般的には、メインテキストから図表を参照するべきですが、図表は参照元の要素と同じ場所に表示する必要はありません。</p> + +<div class="note"> +<p><strong>注</strong>: 可能な限り、意味論的 HTML 要素を使用して図表とそのキャプション（{{htmlelement("figure")}} と {{htmlelement("figcaption")}}）をマークアップするべきです。 詳しくは、{{anch("Best practices","ベストプラクティス")}}を参照してください。</p> +</div> + +<p> </p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt>aria-describedby</dt> + <dd>キャプションとしての参照テキストを含む要素の ID。</dd> + <dt>aria-labelledby</dt> + <dd>ラベルとしてのテキストを含む要素の ID。</dd> + <dt>aria-label</dt> + <dd>ラベルとして機能することができるテキストを含む要素がない場合は、<code>figure</code> ロールを持つ要素や <code><figure></code> 要素の <code>aria-label</code> の値として直接ラベルを追加できます。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>ロールに固有のキーボードインタラクションはありません。</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>ロール固有の JavaScript 要件はありません。 HTML の意味論を制御できない場合は、JavaScript でこれらのロールとプロパティを追加することで、HTML のアクセシビリティを向上させることができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>aria-labelledby</code> でその ID を参照することによって、図表の説明的なラベルを提供する段落を識別するために、このページの最初の例を拡張することもできます。</p> + +<pre><div role="figure" aria-labelledby="figure-1"> + <img src="diagram.png" + alt="素晴らしい4つの層と相対的な優先順位を示すダイヤグラム — + 音楽、猫、自然、そしてアイスクリーム"> + <pre><code> + let awesome = ['音楽', '猫', '自然', 'アイスクリーム']; + </code></pre> + <p id="figure-1">図表 1: 素晴らしい4つの層。</p> +</div></pre> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>たとえば、HTML を制御できないが、JavaScript を使用した後でアクセシビリティを動的に向上させる必要がある場合など、<code>role="figure"</code> のみを使用する必要があります。</p> + +<p>可能であれば、図表とそのキャプション（{{htmlelement("figure")}} と {{htmlelement("figcaption")}}）をマークアップするために、適切な意味論の HTML 要素を使用する必要があります。 たとえば、上記の例は次のように書き直されます。</p> + +<pre class="brush: html"><figure> + <img src="diagram.png" + alt="素晴らしい4つの層と相対的な優先順位を示すダイヤグラム — + 音楽、猫、自然、そしてアイスクリーム"> + <pre><code> + let awesome = ['音楽', '猫', '自然', 'アイスクリーム']; + </code></pre> + <figcaption>図表 1: 素晴らしい4つの層。</figcaption> +</figure></pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#figure","figure")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li> + <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li> + <li><a href="/ja/docs/Web/HTML/Element/figure">HTML <figure> 要素</a></li> + <li><a href="/ja/docs/Web/HTML/Element/figcaption">HTML <figcation> 要素</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/form_role/index.html b/files/ja/web/accessibility/aria/roles/form_role/index.html new file mode 100644 index 0000000000..b181d1ff15 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/form_role/index.html @@ -0,0 +1,171 @@ +--- +title: 'ARIA: form ロール' +slug: Web/Accessibility/ARIA/Roles/Form_Role +tags: + - ARIA + - ARIA Role + - 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> + +<pre class="brush: html"><div role="form" id="contact-info" aria-label="連絡先"> + <!-- フォームのコンテンツ --> +</div> +</pre> + +<p>これは、ユーザーの連絡先を収集して保存するフォームです。</p> + +<div class="warning"> +<p><strong>重要</strong>: 本当に正当な理由がない限り、HTML の {{htmlelement("form")}} 要素を使用してフォームのコントロールを格納するべきです。</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> + +<dl> + <dd> + <div class="note"> + <p>{{htmlelement("form")}} 要素を使用すると、アクセス可能な名前がある場合、自動的にセクションに <code>contentinfo</code> ロールと <code>form</code> ランドマークを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p> + </div> + </dd> +</dl> + +<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> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<p>ロールに固有のステートやプロパティはありません。</p> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>ロールに固有のキーボードインタラクションはありません。</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> + <dt><code>onsubmit</code></dt> + <dd>onSubmit イベントハンドラは、フォームの送信時に発生するイベントを処理します。 <code><form></code> 以外のものは送信できませんので、{{domxref("XMLHTTPRequest")}} などの代替データ送信メカニズムを構築するには、JavaScript を使用する必要があります。</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> + <label for="username">ユーザー名</label> + <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text"> + + <label for="email">電子メール</label> + <input id="email" name="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" type="text"> + + <label for="comment">コメント</label> + <textarea id="comment" name="comment"></textarea> + + <input value="コメント" type="submit"> +<span class="tag"></div</span>> +</pre> + +<p>代わりに <code><form></code> を使用することをお勧めします。</p> + +<pre><span class="tag"><form id="send-comment" aria-label="</span>コメントを追加<span class="tag">"></span> + .... +<span class="tag"></form</span>> +</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> + +<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> + +<h3 id="Search" name="Search">検索</h3> + +<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> + +<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> + +<h4 id="Using_roleform" name="Using_roleform"><code>role="form"</code> の使用</h4> + +<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> + +<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> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<dl> +</dl> + +<dl> +</dl> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#form","ARIA Form Role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_form","Role Form")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <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="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> diff --git a/files/ja/web/accessibility/aria/roles/grid_role/index.html b/files/ja/web/accessibility/aria/roles/grid_role/index.html new file mode 100644 index 0000000000..666819b2b4 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/grid_role/index.html @@ -0,0 +1,715 @@ +--- +title: 'ARIA: grid ロール' +slug: Web/Accessibility/ARIA/Roles/Grid_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Grid_Role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary"><code>grid</code> ロールは、1つ以上のセルの行を含むウィジェット用です。 各セルの位置は重要であり、キーボード入力を使用してフォーカスすることができます。</span></p> + +<pre class="brush: html"><table role="grid" aria-labelledby="select-your-seat"> + <caption>座席を選んでください</caption> + <tbody role="presentation"> + <tr role="presentation"> + <td></td> + <th>列 A</th> + <th>列 B</th> + </tr> + <tr> + <th scope="row">島 1</th> + <td tabindex="0"> + <button id="1a" tabindex="-1">1A</button> + </td> + <td tabindex="-1"> + <button id="1b" tabindex="-1">1B</button> + </td> + <!-- More Columns --> + </tr> + <tr> + <th scope="row">島 2</th> + <td tabindex="-1"> + <button id="2a" tabindex="-1">2A</button> + </td> + <td tabindex="-1"> + <button id="2b" tabindex="-1">2B</button> + </td> + <!-- More Columns --> + </tr> + </tbody> +</table> +</pre> + +<p>（オプション）上記の例の簡単な説明を含めます。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p>グリッドウィジェットには、テーマに関連するインタラクティブなコンテンツの1つ以上のセルを持つ1つ以上の行が含まれています。 それは特定の視覚的プレゼンテーションを意味するわけではありませんが、要素間の関係を意味します。 これは、チェックボックスやナビゲーションリンクなどのような単純なグループ化に使用します。 複雑なスプレッドシートアプリケーションにも使用できます。</p> + +<p>セル要素には、行ヘッダーや列ヘッダーでない限り、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></code> ロールがあります。 ヘッダー要素ではそれぞれ <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a></code> ロールと <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">columnheader</a></code> ロールです。 セル要素は、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></code> ロールを持つ要素によって所有される必要があります。 行は <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code> を使用してグループ化できます。</p> + +<p>グリッドをインタラクティブなウィジェットとして使用する場合は、{{anch("Keyboard interactions","キーボードインタラクション")}}を実装する必要があります。</p> + +<p> </p> + +<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt> + <h4 id="Roles" name="Roles">ロール</h4> + </dt> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a>（サブクラス）</dt> + <dd>展開や折りたたみができる列を持つグリッドには、ツリーグリッドを使用できます。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></dt> + <dd>グリッド内の行。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></dt> + <dd>1つ以上の <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></code> を含むグループ。</dd> +</dl> + +<h4 id="States_and_Properties" name="States_and_Properties">ステートとプロパティ</h4> + +<dl> + <dt>aria-level</dt> + <dd>他の構造内のグリッドの階層レベルを示します。</dd> + <dt>aria-multiselectable</dt> + <dd><code>aria-multiselectable</code> が <code>true</code> に設定されている場合、グリッド内の複数の項目を選択できます。 デフォルト値は <code>false</code> です。</dd> + <dt>aria-readonly</dt> + <dd>ユーザーがグリッドをナビゲートできるが、グリッドの値を変更できない場合は、<code>aria-readonly</code> を <code>true</code> に設定するべきです。 デフォルト値は <code>false</code> です。</dd> +</dl> + +<div class="note"> +<p>多くのユースケースでは、HTML の <code><a href="/ja/docs/Web/HTML/Element/table">table</a></code> 要素で十分であり、その要素にはすでに多くの ARIA ロールが含まれています。</p> +</div> + +<h3 id="Keyboard_interactions" name="Keyboard_interactions">キーボードインタラクション</h3> + +<p>キーボードユーザーはグリッドに出会うと、<kbd>左</kbd>、<kbd>右</kbd>、<kbd>上</kbd>、<kbd>下</kbd>のキーを使用して行と列をナビゲートします。 インタラクティブなコンポーネントをアクティブにするには、<kbd>リターン</kbd>キーと<kbd>スペース</kbd>キーを使用します。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">キー</th> + <th scope="col">動作</th> + </tr> + </thead> + <tbody> + <tr> + <td><kbd>→</kbd></td> + <td>1セル右にフォーカスを移動します。 フォーカスが行の右端のセルにある場合、フォーカスは移動しません。</td> + </tr> + <tr> + <td><kbd>←</kbd></td> + <td>1セル左にフォーカスを移動します。 フォーカスが行の左端のセルにある場合、フォーカスは移動しません。</td> + </tr> + <tr> + <td><kbd>↓</kbd></td> + <td>1セル下にフォーカスを移動します。 フォーカスが列の最下部のセルにある場合、フォーカスは移動しません。</td> + </tr> + <tr> + <td><kbd>↑</kbd></td> + <td>1セル上にフォーカスを移動します。 フォーカスが列の最上部のセルにある場合、フォーカスは移動しません。</td> + </tr> + <tr> + <td><kbd>Page Down</kbd></td> + <td>作成者が決定した行数だけ下にフォーカスを移動します。 通常、現在表示されている行セットの一番下の行が最初に表示される行の1つになるようにスクロールします。 フォーカスがグリッドの最後の行にある場合、フォーカスは移動しません。</td> + </tr> + <tr> + <td><kbd>Page Up</kbd></td> + <td>作成者が決定した行数だけ上にフォーカスを移動します。通常、現在表示されている行セットの一番上の行が最後に表示される行の1つになるようにスクロールします。 フォーカスがグリッドの最初の行にある場合、フォーカスは移動しません。</td> + </tr> + <tr> + <td><kbd>Home</kbd></td> + <td>フォーカスを含む行の最初のセルにフォーカスを移動します。</td> + </tr> + <tr> + <td><kbd>End</kbd></td> + <td>フォーカスを含む行の最後のセルにフォーカスを移動します。</td> + </tr> + <tr> + <td><kbd>ctrl</kbd> + <kbd>Home</kbd></td> + <td>最初の行の最初のセルにフォーカスを移動します。</td> + </tr> + <tr> + <td><kbd>ctrl</kbd> + <kbd>End</kbd></td> + <td>最後の行の最後のセルにフォーカスを移動します。</td> + </tr> + </tbody> +</table> + +<p>セル、行、列を複数選択できる場合は、次のキーの組み合わせが一般的に使用されます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">キーの組み合わせ</th> + <th scope="col">動作</th> + </tr> + </thead> + <tbody> + <tr> + <td><kbd>ctrl</kbd> + <kbd>Space</kbd></td> + <td>フォーカスを含む列を選択します。</td> + </tr> + <tr> + <td><kbd>shift</kbd> + <kbd>Space</kbd></td> + <td>フォーカスを含む行を選択します。 グリッドに行を選択するためのチェックボックス付きの列が含まれている場合、このキーの組み合わせを使用して、フォーカスがチェックボックスにない場合でもそのボックスをチェックできます。</td> + </tr> + <tr> + <td><kbd>ctrl</kbd> + <kbd>A</kbd></td> + <td>すべてのセルを選択します。</td> + </tr> + <tr> + <td><kbd>shift</kbd> + <kbd>→</kbd></td> + <td>選択範囲を1セル右側に拡張します。</td> + </tr> + <tr> + <td><kbd>shift</kbd> + <kbd>←</kbd></td> + <td>選択範囲を1セル左側に拡張します。</td> + </tr> + <tr> + <td><kbd>shift</kbd> + <kbd>↓</kbd></td> + <td>選択範囲を1セル下側に拡張します。</td> + </tr> + <tr> + <td><kbd>shift</kbd> + <kbd>↑</kbd></td> + <td>選択範囲を1セル上側に拡張します。</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Calendar_example" name="Calendar_example">カレンダーの例</h3> + +<div class="hidden"> +<h4 id="HTML" name="HTML">HTML</h4> + +<pre class="brush: html"><table role="grid" aria-labelledby="calendarheader" aria-readonly=true> + <caption id="calendarheader">September 2018</caption> + <thead role="rowgroup"> + <tr role="row"> + <td></td> + <th role="columnheader" aria-label="Sunday">S</th> + <th role="columnheader" aria-label="Monday">M</th> + <th role="columnheader" aria-label="Tuesday">T</th> + <th role="columnheader" aria-label="Wednesday">W</th> + <th role="columnheader" aria-label="Thursday">T</th> + <th role="columnheader" aria-label="Friday">F</th> + <th role="columnheader" aria-label="Saturday">T</th> + </tr> + </thead> + <tbody role="rowgroup"> + <tr role="row"> + <th scope="row" role="rowheader">Week 35</th> + <td>26</td> + <td>27</td> + <td>28</td> + <td>29</td> + <td>30</td> + <td>31</td> + <td role="gridcell" tabindex="-1">1</td> + </tr> + <tr role="row"> + <th scope="row" role="rowheader">Week 36</th> + <td role="gridcell" tabindex="-1"> + 2 + </td> + <td role="gridcell" tabindex="-1"> + 3 + </td> + <td role="gridcell" tabindex="-1"> + 4 + </td> + <td role="gridcell" tabindex="-1"> + 5 + </td> + <td role="gridcell" tabindex="-1"> + 6 + </td> + <td role="gridcell" tabindex="-1"> + 7 + </td> + <td role="gridcell" tabindex="-1"> + 8 + </td> + </tr> + <tr role="row"> + <th scope="row" role="rowheader">Week 37</th> + <td role="gridcell" tabindex="-1"> + 9 + </td> + <td role="gridcell" tabindex="-1"> + 10 + </td> + <td role="gridcell" tabindex="-1"> + 11 + </td> + <td role="gridcell" tabindex="-1"> + 12 + </td> + <td role="gridcell" tabindex="-1"> + 13 + </td> + <td role="gridcell" tabindex="-1"> + 14 + </td> + <td role="gridcell" tabindex="-1"> + 15 + </td> + </tr> + <tr role="row"> + <th scope="row" role="rowheader">Week 38</th> + <td role="gridcell" tabindex="-1"> + 16 + </td> + <td role="gridcell" tabindex="-1"> + 17 + </td> + <td role="gridcell" tabindex="-1"> + 18 + </td> + <td role="gridcell" tabindex="-1"> + 19 + </td> + <td role="gridcell" tabindex="-1"> + 20 + </td> + <td role="gridcell" tabindex="-1"> + 21 + </td> + <td role="gridcell" tabindex="-1"> + 22 + </td> + </tr> + <tr role="row"> + <th scope="row" role="rowheader">Week 39</th> + <td role="gridcell" tabindex="-1"> + 23 + </td> + <td role="gridcell" tabindex="-1"> + 24 + </td> + <td role="gridcell" tabindex="-1"> + 25 + </td> + <td role="gridcell" tabindex="-1"> + 26 + </td> + <td role="gridcell" tabindex="-1"> + 27 + </td> + <td role="gridcell" tabindex="-1"> + 28 + </td> + <td role="gridcell" tabindex="-1"> + 29 + </td> + </tr> + <tr role="row"> + <th scope="row" role="rowheader">Week 40</th> + <td role="gridcell" tabindex="-1"> + 30 + </td> + <td>1</td> + <td>2</td> + <td>3</td> + <td>4</td> + <td>5</td> + <td>6</td> + </tr> + </tbody> +</table></pre> + +<h4 id="CSS" name="CSS">CSS</h4> + +<pre class="brush: css">body { + margin: 2rem; + font-family: "Helvetica Neue", sans-serif; +} + +table { + margin: 0; + border-collapse: collapse; + font-variant-numeric: tabular-nums; +} + +tbody th, tbody td { + padding: 5px; +} + +tbody td { + border: 1px solid #000; + text-align: right; + color: #767676; +} + +tbody td[role="gridcell"] { + color: #000; +} + +tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { + background-color: #f6f6f6; + outline: 3px solid blue; + } +}</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<pre class="brush: js">var selectables = document.querySelectorAll('table td[role="gridcell"]'); + +selectables[0].setAttribute('tabindex', 0); + +var trs = document.querySelectorAll('table tbody tr'), + row = 0, + col = 0, + maxrow = trs.length - 1, + maxcol = 0; + +Array.prototype.forEach.call(trs, function(gridrow, i){ + Array.prototype.forEach.call(gridrow.querySelectorAll('td'), function(el, i){ + el.dataset.row = row; + el.dataset.col = col; + col = col + 1; + }); + if (col>maxcol) { maxcol = col - 1; } + col = 0; + row = row + 1; +}); + +function moveto(newrow, newcol) { + var tgt = document.querySelector('[data-row="' + newrow + '"][data-col="' + newcol + '"]'); + if (tgt && (tgt.getAttribute('role')==='gridcell') ) { + Array.prototype.forEach.call(document.querySelectorAll('[role=gridcell]'), function(el, i){ + el.setAttribute('tabindex', '-1'); + }); + tgt.setAttribute('tabindex', '0'); + tgt.focus(); + return true; + } else { + return false; + } +} + +document.querySelector('table').addEventListener("keydown", function(event) { + switch (event.key) { + case "ArrowRight": + moveto(parseInt(event.target.dataset.row, 10), parseInt(event.target.dataset.col, 10) + 1); + break; + case "ArrowLeft": + moveto(parseInt(event.target.dataset.row, 10), parseInt(event.target.dataset.col, 10) - 1); + break; + case "ArrowDown": + moveto(parseInt(event.target.dataset.row, 10) + 1, parseInt(event.target.dataset.col, 10)); + break; + case "ArrowUp": + moveto(parseInt(event.target.dataset.row, 10) - 1, parseInt(event.target.dataset.col, 10)); + break; + case "Home": + if (event.ctrlKey) { + var i = 0; + var result; + do { + var j = 0; + var result; + do { + result = moveto(i, j); + j++; + } while (result == false); + i++; + } while (result == false); + } else { + moveto(parseInt(event.target.dataset.row, 10), 0); + } + break; + case "End": + if (event.ctrlKey) { + var i = maxrow; + var result; + do { + var j = maxcol; + do { + result = moveto(i, j); + j--; + } while (result == false); + i--; + } while (result == false); + } else { + moveto(parseInt(event.target.dataset.row, 10), document.querySelector('[data-row="' + event.target.dataset.row + '"]:last-of-type').dataset.col); + } + break; + case "PageUp": + var i = 0; + var result; + do { + result = moveto(i, event.target.dataset.col); + i++; + } while (result == false); + break; + case "PageDown": + var i = maxrow; + var result; + do { + result = moveto(i, event.target.dataset.col); + i--; + } while (result == false); + break; + case "Enter": + alert(event.target.textContent); + break; + } + event.preventDefault(); +}); +</pre> +</div> + +<p>{{EmbedLiveSample("Calendar_example", "100%", "300")}}</p> + +<p> </p> + +<h4 id="HTML_2" name="HTML_2">HTML</h4> + +<pre><table role="grid" aria-labelledby="calendarheader"> + <caption id="calendarheader">September 2018</caption> + <thead role="rowgroup"> + <tr role="row"> + <td></td> + <th role="columnheader" aria-label="Sunday">S</th> + <th role="columnheader" aria-label="Monday">M</th> + <th role="columnheader" aria-label="Tuesday">T</th> + <th role="columnheader" aria-label="Wednesday">W</th> + <th role="columnheader" aria-label="Thursday">T</th> + <th role="columnheader" aria-label="Friday">F</th> + <th role="columnheader" aria-label="Saturday">T</th> + </tr> + </thead> + <tbody role="rowgroup"> + <tr role="row"> + <th scope="row" role="rowheader">Week 35</th> + <td>26</td> + <td>27</td> + <td>28</td> + <td>29</td> + <td>30</td> + <td>31</td> + <td role="gridcell" tabindex="-1">1</td> + </tr> + <tr role="row"> + <th scope="row" role="rowheader">Week 36</th> + <td role="gridcell" tabindex="-1"> + 2 + </td> + <td role="gridcell" tabindex="-1"> + 3 + </td> + <td role="gridcell" tabindex="-1"> + 4 + </td> + <td role="gridcell" tabindex="-1"> + 5 + </td> + <td role="gridcell" tabindex="-1"> + 6 + </td> + <td role="gridcell" tabindex="-1"> + 7 + </td> + <td role="gridcell" tabindex="-1"> + 8 + </td> + </tr> + <!-- … Additional Rows … --> + </tbody> +</table></pre> + +<h4 id="CSS_2" name="CSS_2">CSS</h4> + +<pre class="brush: css">table { + margin: 0; + border-collapse: collapse; + font-variant-numeric: tabular-nums; +} + +tbody th, tbody td { + padding: 5px; +} + +tbody td { + border: 1px solid #000; + text-align: right; + color: #767676; +} + +tbody td[role="gridcell"] { + color: #000; +} + +tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { + background-color: #f6f6f6; outline: 3px solid blue; +} +</pre> + +<h4 id="JavaScript_2" name="JavaScript_2">JavaScript</h4> + +<pre>var selectables = document.querySelectorAll('table td[role="gridcell"]'); + +selectables[0].setAttribute('tabindex', 0); + +var trs = document.querySelectorAll('table tbody tr'), + row = 0, + col = 0, + maxrow = trs.length - 1, + maxcol = 0; + +Array.prototype.forEach.call(trs, function(gridrow, i){ + Array.prototype.forEach.call(gridrow.querySelectorAll('td'), function(el, i){ + el.dataset.row = row; + el.dataset.col = col; + col = col + 1; + }); + if (col>maxcol) { maxcol = col - 1; } + col = 0; + row = row + 1; +}); + +function moveto(newrow, newcol) { + var tgt = document.querySelector('[data-row="' + newrow + '"][data-col="' + newcol + '"]'); + if (tgt && (tgt.getAttribute('role')==='gridcell') ) { + Array.prototype.forEach.call(document.querySelectorAll('[role=gridcell]'), function(el, i){ + el.setAttribute('tabindex', '-1'); + }); + tgt.setAttribute('tabindex', '0'); + tgt.focus(); + return true; + } else { + return false; + } +} + +document.querySelector('table').addEventListener("keydown", function(event) { + switch (event.key) { + case "ArrowRight": + moveto(parseInt(event.target.dataset.row, 10), parseInt(event.target.dataset.col, 10) + 1); + break; + case "ArrowLeft": + moveto(parseInt(event.target.dataset.row, 10), parseInt(event.target.dataset.col, 10) - 1); + break; + case "ArrowDown": + moveto(parseInt(event.target.dataset.row, 10) + 1, parseInt(event.target.dataset.col, 10)); + break; + case "ArrowUp": + moveto(parseInt(event.target.dataset.row, 10) - 1, parseInt(event.target.dataset.col, 10)); + break; + case "Home": + if (event.ctrlKey) { + var i = 0; + var result; + do { + var j = 0; + var result; + do { + result = moveto(i, j); + j++; + } while (result == false); + i++; + } while (result == false); + } else { + moveto(parseInt(event.target.dataset.row, 10), 0); + } + break; + case "End": + if (event.ctrlKey) { + var i = maxrow; + var result; + do { + var j = maxcol; + do { + result = moveto(i, j); + j--; + } while (result == false); + i--; + } while (result == false); + } else { + moveto(parseInt(event.target.dataset.row, 10), document.querySelector('[data-row="' + event.target.dataset.row + '"]:last-of-type').dataset.col); + } + break; + case "PageUp": + var i = 0; + var result; + do { + result = moveto(i, event.target.dataset.col); + i++; + } while (result == false); + break; + case "PageDown": + var i = maxrow; + var result; + do { + result = moveto(i, event.target.dataset.col); + i--; + } while (result == false); + break; + case "Enter": + alert(event.target.textContent); + break; + } + event.preventDefault(); +});</pre> + +<p> </p> + +<h3 id="More_examples" name="More_examples">より多くの例</h3> + +<p>他の例を以下で見つけることができます。</p> + +<ul> + <li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html">データグリッドの例</a>（英語）</li> + <li><a href="https://www.w3.org/TR/wai-aria-practices/examples/grid/LayoutGrids.html">レイアウトグリッドの例</a>（英語）</li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/">W3C/WAI チュートリアル: テーブル</a>（英語）</li> +</ul> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p>{{anch("Keyboard interactions","キーボードインタラクション")}}が適切に実装されていても、矢印キーを使用する必要があることに気づかないユーザーもいます。 <code>grid</code> ロールを使用して、必要な機能とインタラクションが最善にアーカイブできることを確認してください。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#grid","Role Grid")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#grid","Role Grid")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/composite_Role">ARIA composite ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/table_Role">ARIA table ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/treegrid_Role">ARIA treegrid ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/row_Role">ARIA row ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/rowgroup_Role">ARIA rowgroup ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">ARIA: gridcell ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">ARIA: rowheader ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">ARIA: columnheader ロール</a></li> + <li><a href="/ja/docs/Web/HTML/Element/table">HTML table 要素</a></li> + <li>aria-level</li> + <li>aria-multiselectable</li> + <li>aria-readonly</li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/heading_role/index.html b/files/ja/web/accessibility/aria/roles/heading_role/index.html new file mode 100644 index 0000000000..b8fb52a347 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/heading_role/index.html @@ -0,0 +1,114 @@ +--- +title: 'ARIA: heading ロール' +slug: Web/Accessibility/ARIA/Roles/heading_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/heading_role +--- +<div> {{MDNSidebar}}\{{ariaref}}</div> + +<p><span class="seoSummary"><code>heading</code> ロールは、この要素をページやセクションの見出しとして定義します。 ページに構造を与えるために、セクション間の関係を示すレベルも提供するべきです。</span></p> + +<pre class="brush: html"><div role="heading" aria-level="1">これはメインページの見出しです</div> +</pre> + +<p>これは div のテキストをページのメインの見出しとして定義します。 それは <code>aria-level</code> 属性を介してレベル 1 で示します。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>heading</code> ロールは、この要素を見出しのように扱うべきであることを支援技術に示します。 スクリーンリーダーは、たとえば、テキストを読み、このテキストが見出しのように書式設定されていることを示します。 さらに、レベルは、この見出しが表すページ構造のどの部分を支援技術に伝えるべきかを示すべきです。 レベル 1 見出しは、通常、ページのメインの見出しを示し、レベル 2 は、最初のサブセクションを示し、レベル 3 は、そのサブセクションなどとなります。</p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><code>aria-level</code></dt> + <dd><code>aria-level</code> 属性は、この見出しが文書構造内にあるレベルを指定します。 レベルが存在しない場合、デフォルト値は 2 です。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>このロールは特別なキーボードナビゲーションを必要としません。 どんな見出しもそうであるように、ID を与えることで、アンカーリンクから参照できるようになり、キーボードを介してアクセス可能となります。</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> + <dt>必要なイベントハンドラ</dt> + <dd>無し</dd> + <dt>属性値の変更</dt> + <dd>コンテンツを動的に挿入する場合を除き、通常は必須ではありませんが、この場合、新しく追加された見出しには、文書構造の残りの部分と値が整合する <code>aria-level</code> 属性が必要です。</dd> +</dl> + +<div class="note"> +<p><code>heading</code> ロールと <code>aria-level</code> で <code><div></code> または <code><span></code> を使用する代わりに、このテキストが見出しであり、それが表す構造の部分を示すために、代わりに <code><h1></code> から <code><h6></code> の要素を使用することを検討してください 。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下は典型的なページ構造を示しています。</p> + +<pre class="brush: html"><div id="container"> +<div role="heading" aria-level="1">メインページ見出し</div> +<p>この記事では、ページ構造の表示について説明します。</p> +<div role="heading" aria-level="2">前書き</div> +<p>導入テキスト。</p> +<div role="heading" aria-level="2">第 1 章</div> +<p>テキスト</p> +<div role="heading" aria-level="3">第 1.1 章</div> +<p>サブセクション内の複数のテキスト。</p> +...</div></pre> + +<p>ただし、代わりに次のようにするべきです。</p> + +<pre class="brush: html"><div id="container"> +<h1>メインページ見出し</h1> +<p>この記事では、ページ構造の表示について説明します。</p> +<h2>前書き</h2> +<p>導入テキスト。</p> +<h2>第 1 章</h2> +<p>テキスト</p> +<h3>第 1.1 章</h3> +<p>サブセクション内の複数のテキスト。</p> +...</div></pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p><code>heading</code> ロールと <code>aria-level</code> 属性を使用する必要がある場合は、HTML との整合性を保つために、レベルでレベル 6 を超えないようにしてください。 理論的にはそれより大きくすることができますが、一部のスクリーンリーダーでサポートする場合もありますが、他のブラウザーやスクリーンリーダーの組み合わせでは結果が予測できない場合があります。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>このロールを使用する最良の方法は、まったく使用しないで、代わりに上記の例に示すようにネイティブの見出しタグ <code><h1></code> ～ <code><h6></code> を使用することです。 <code>heading</code> ロールと <code>aria-level</code> 属性は、実際には、大きな変更を加えることができないレガシーコードにアクセシビリティを取り入れる場合にのみ使用するべきです。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加の利点</h3> + +<p>無し</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#heading","heading")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Precedence_order" name="Precedence_order">優先順位</h2> + +<p><code>heading</code> ロールは、それが使用されている要素のネイティブな意味論的意味をオーバーライドします。 また、<code>aria-level</code> 属性は、どのレベルの見出しが公開されているかに関する情報を提供します。</p> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6>: HTML の見出し要素</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/index.html b/files/ja/web/accessibility/aria/roles/index.html new file mode 100644 index 0000000000..c3fc70ecab --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/index.html @@ -0,0 +1,72 @@ +--- +title: WAI-ARIA ロール +slug: Web/Accessibility/ARIA/Roles +translation_of: Web/Accessibility/ARIA/Roles +--- +<p class="summary">このページは、MDN で説明されているすべての WAI-ARIA ロールをカバーするリファレンスページを一覧にしています。ロールの完全なリストについては、<a href="/ja-JP/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA を使用する: ロール、ステート、プロパティ</a>をご覧ください。</p> + +<p>{{SubpagesWithSummaries}}</p> + +<div class="hidden"> +<p>Please claim the role you want to work on by adding your name after the role's name: (old pages are linked from <a href="/en-US/docs/">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques</a>). Ones for which the first draft is completed have been removed from the below list.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_Role">banner</a> </li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">Combobox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Command_Role">Command</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">Columnheader </a>(Estelle)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Composite_Role">composite</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Definition_Role">Definition</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Directory_Role">Directory</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Feed_Role">Feed</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">Gridcell</a> (Eric E)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Group_Role">Group</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Input_Role">input</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Landmark_Role">landmark</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Link_Role">Link</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listbox_Role">listbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Log_Role">Log</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Marquee_Role">Marquee</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Math_Role">math</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menu_Role">menu</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menubar_Role">menubar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuiitem_Role">Menuitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">Menuitemcheckbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">Menuitemradio</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/None_Role">none</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Note_Role">note</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_Role">Option</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Presentation_Role">presentation</a> </li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Progressbar_Role">Progressbar</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">Radio</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radiogroup_Role">radiogroup</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Range_Role">range</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_Role">region</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Roletype_Role">roletype</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a>(Estelle)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Scrollbar_Role">Scrollbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Searchbox_Role">searchbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Section_Role">section</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Sectionhead_Role">sectionhead</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Select_Role">select</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Separator_Role">separator</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Slider_Role">Slider</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Spinbutton_Role">Spinbutton</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Status_Role">Status</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Structure_Role">structure</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_role">tab</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (Michiel)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a> (Michiel)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Term_Role">term</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Time_Role">Timer</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Toolbar_Role">toolbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Widget_Role">widget</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Window_Role">window</a></li> +</ul> +</div> diff --git a/files/ja/web/accessibility/aria/roles/list_role/index.html b/files/ja/web/accessibility/aria/roles/list_role/index.html new file mode 100644 index 0000000000..d3dfaa48f3 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/list_role/index.html @@ -0,0 +1,115 @@ +--- +title: 'ARIA: list ロール' +slug: Web/Accessibility/ARIA/Roles/List_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/List_role +--- +<p>\{{ariaref}}<span class="seoSummary">ARIA の <code>list</code> ロールは、項目のリスト（list）を識別するために使用できます。 これは、通常、リスト内に含まれるリスト項目（list item）を識別するために使用される <code>listitem</code> ロールと組み合わせて使用されます。</span></p> + +<pre class="brush: html"><section role="list"> + <div role="listitem">リスト項目 1</div> + <div role="listitem">リスト項目 2</div> + <div role="listitem">リスト項目 3</div> +</section> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p>外側のコンテナとその内側の要素のリストで構成されるコンテンツは、それぞれ <code>list</code> と <code>listitem</code> のコンテナを使用して支援技術で識別できます。 <code>list</code> には1つ以上の <code>listitem</code> の子が含まれているか、1つ以上の <code>group</code> が子として存在し、各 <code>group</code> には1つ以上の <code>listitem</code> が子として格納されている必要があります。</p> + +<p>リストとリスト項目をマークアップするためにどの要素を使用すべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです。 例えば、買い物リスト、料理の手順、運転の指示。</p> + +<div class="warning"> +<p><strong>警告</strong>: 可能な限り、適切な意味論の HTML 要素を使用して、<code>list</code> とその <code>listitem</code>（{{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}）をマークアップする必要があります。 詳しくは、{{anch("Best practices","ベストプラクティス")}}を参照してください。</p> +</div> + +<p> </p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></dt> + <dd> + <p>リストやディレクトリ内の単一項目。 <code>listitem</code> ロールを持つ要素は、<code>list</code> ロールや <code>group</code> ロールを持つ要素内にのみ存在します。</p> + </dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">group</a></dt> + <dd> + <p>リストにネストされたときにリスト項目に限定される関連オブジェクトのコレクションです。 ページの目次に独自の場所を持つほど重要ではありません。</p> + </dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>無し</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p> <a href="https://www.scottohara.me/blog/2018/05/26/aria-lists.html">ARIA Lists</a> — Scott O'Hara によるいくつかの有用な例と考え（英語）</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>例えば、HTML を制御できないが、JavaScript を使用した後でアクセシビリティを動的に向上させる必要がある場合など、<code>role="list"</code> と <code>role="listitem"</code> のみを使用する必要があります。</p> + +<p>HTML の {{htmlelement("ol")}} と {{htmlelement("ul")}} とは異なり、ARIA の <code>list </code>ロールは順序付きリストと順序無しリストを区別しません。 可能な場合は、リスト（{{htmlelement("ol")}} と {{htmlelement("ul")}}）とリスト項目（{{htmlelement("li")}}）をマークアップするのに適切な意味論の HTML 要素を使用するべきです。 例えば、上記の例は次のように書き直<span id="result_box" lang="ja"><span>すべきです</span></span>。</p> + +<pre class="brush: html"><ul> + <li>リスト項目 1</li> + <li>リスト項目 2</li> + <li>リスト項目 3</li> +</ul></pre> + +<p>リスト項目の順序が重要な場合は、順序付きリストを使用します。</p> + +<pre class="brush: html"><ol> + <li>リスト項目 1</li> + <li>リスト項目 2</li> + <li>リスト項目 3</li> +</ol></pre> + +<div class="note"> +<p><strong>注</strong>: ARIA の <code>list</code> ロールと <code>listitem</code> ロールでは、順序付きリストと順序無しリストを区別しません。</p> +</div> + +<p>仮に、<code>ol</code> または <code>ul</code> という意味論の HTML 要素を使用して <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> ロールを適用する場合、ARIA では <code>listitem</code> 要素に親 <code>list</code> 要素が必要であるため、各子 <code>li</code> 要素は <code>presentation</code> ロールを継承します。 したがって、<code>li</code> 要素は支援技術には見えませんが、これらの要素の内部に含まれる要素（ネストされたリストを含む）は、支援技術に見えます。</p> + +<div class="note"> +<p><strong>注</strong>: タブ付きインターフェースとして機能する項目のリストをマークアップする場合は、代わりに <code>tab</code>、<code>tabpanel</code>、<code>tablist</code> ロールを使用するべきです。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#list","list")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li> + <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li> + <li><span class="ILfuVd yZ8quc">{{htmlelement("ul")}}</span></li> + <li><span class="ILfuVd yZ8quc">{{htmlelement("ol")}}</span></li> + <li><span class="ILfuVd yZ8quc">{{htmlelement("li")}}</span></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role">ARIA: listitem ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">ARIA: group ロール</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/listbox_role/index.html b/files/ja/web/accessibility/aria/roles/listbox_role/index.html new file mode 100644 index 0000000000..58106a9e75 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/listbox_role/index.html @@ -0,0 +1,211 @@ +--- +title: 'ARIA: listbox ロール' +slug: Web/Accessibility/ARIA/Roles/listbox_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/listbox_role +--- +<p>\{{ariaref}}</p> + +<ul class="ul1"> +</ul> + +<ul class="ul1"> +</ul> + +<p><span class="seoSummary"><code>listbox</code> ロールは、ユーザーが静的な1つ以上の項目を選択するリストに使用され、HTML の <code><select></code> 要素とは異なり、画像を含むことがあります。</span></p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>listbox</code> ロールは、HTML の {{htmlelement("select")}} 要素と同様に、ユーザーが1つまたは複数の静的項目を選択できるリストを作成する要素を識別するために使用されます。 <code><select></code> とは異なり、リストボックス（listbox）は画像を含むことができます。 リストボックスのそれぞれの子は、<code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option">option</a></code> ロールを持つべきです。</p> + +<p>HTML の <code><select></code> 要素または、1項目のみを選択する場合はラジオボタンのグループ、複数項目を選択する場合はチェックボックスのグループを使用することを強くお勧めします。 なぜなら、全ての子孫のフォーカスを管理するためのキーボードのインタラクティビティがたくさんあり、ネイティブな HTML 要素がこの機能を無料で提供するためです。</p> + +<p><code>listbox</code> ロールを持つ要素は、暗黙の <code>aria-orientation</code> の値に <code>vertical</code> を持ちます。</p> + +<p class="p1">リストに<kbd>タブ</kbd>で移動した場合、他に何も選択されていない場合はリスト内の最初の項目が選択されます。 <kbd>上/下矢印</kbd>はリストをナビゲートし、<kbd>Shift + 上/下矢印</kbd>を押すと選択範囲が移動して拡張されます。 1つ以上の文字を入力すると、リスト項目をナビゲートします（同じ文字はその文字から始まる各項目に移動し、異なる文字はその文字列全体で始まる最初の項目に移動します）。 現在の項目に関連するコンテキストメニューがある場合、<kbd>Shift + F10</kbd> でそのメニューが起動します。 リスト項目がチェック可能である場合、<kbd>スペース</kbd>を使用して<a href="http://www.w3.org/TR/wai-aria-practices/#checkbox">チェックボックス</a>をトグルできます。 選択可能なリスト項目の場合、<kbd>スペース</kbd>は選択をトグルし、<kbd>Shift + スペース</kbd>を使用して連続項目を選択し、<kbd>Ctrl + 矢印</kbd>で選択せずに移動し、<kbd>Ctrl + スペース</kbd>を使用して不連続項目を選択できます。 全ての項目を選択するには、チェックボックス、リンクまたは他の方法を使用することをお勧めします。 <kbd>Ctrl + A</kbd> は、このためのショートカットキーとして使用できます。</p> + +<p class="li2"><code>listbox</code> ロールが要素に追加されるか、そのような要素が可視になると、スクリーンリーダーは、フォーカスを得たときにリストボックスのラベルとロールをアナウンスします。 オプションや項目がリスト内でフォーカスされている場合は、次にそれがアナウンスされ、その後、スクリーンリーダーがサポートしている場合は、リストでの項目の位置が示されます。 リスト内でフォーカスが移動すると、スクリーンリーダーは関連する項目をアナウンスします。</p> + +<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3> + +<h4 id="Associated_Roles" name="Associated_Roles">関連するロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Option_Role">option</a></dt> + <dd>1つ以上のネストされたオプションが必要です。 選択された全てのオプションは、<code>aria-selected</code> が <code>true</code> に設定されています。 選択されていない全てのオプションは、<code>aria-selected</code> が <code>false</code> に設定されています。 オプションを選択できない場合は、<code>aria-selected</code> を省略します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></dt> + <dd><code>listitem</code> 要素を含むセクション。</dd> +</dl> + +<h4 id="States_and_Properties" name="States_and_Properties">ステートとプロパティ</h4> + +<dl> + <dt>aria-multiselectable</dt> + <dd>ユーザーが複数のオプションを選択できるようにするには、これを含めて <code>true</code> を設定します。 <code>true</code> に設定するならば、全てのオプションに <code>aria-selected</code> 属性を含めるべきです。 <code>false</code> または省略すると、現在選択されているオプションのみが選択され、いずれかのオプションが選択されている場合は、<code>aria-selected</code> 属性が必要で、<code>true</code> に設定する必要があります。</dd> + <dt>aria-activedescendant</dt> + <dd>そのオプションの <code>aria-selected</code> の値が <code>true</code> や <code>false</code> を持っているかどうかに関わらず、最も最近にオプションと対話したことを意味する、現在アクティブなオプションの <code>id</code> を値として取ります。 複数選択であっても、1つの <code>id</code> の値をとります。</dd> + <dt>aria-required</dt> + <dd>選択が必要であることを示します。</dd> + <dt>aria-readonly</dt> + <dd>リストボックスは編集可能ではありません。 ユーザーはオプションの選択や非選択を変更することはできませんが、それ以外の操作は可能です。</dd> +</dl> + +<h3 id="Keyboard_interactions" name="Keyboard_interactions">キーボードインタラクション</h3> + +<ul> + <li>単一選択リストボックスがフォーカスを受け取ったとき、 + <ul> + <li>リストボックスがフォーカスを受け取る前にオプションが選択されていない場合、最初のオプションがフォーカスを受け取ります。 必要に応じて、最初のオプションを自動的に選択してもよい。</li> + <li>リストボックスがフォーカスを受け取る前にオプションが選択されている場合、フォーカスは選択されたオプションに設定されます。</li> + </ul> + </li> + <li>複数選択リストボックスがフォーカスを受け取ったとき、 + <ul> + <li>リストボックスがフォーカスを受け取る前にどのオプションも選択されていない場合、フォーカスは最初のオプションに設定され、選択状態には自動的な変更はありません。</li> + <li>リストボックスがフォーカスを受け取る前に1つ以上のオプションが選択されている場合、フォーカスは選択されているリストの最初のオプションに設定されます。</li> + </ul> + </li> + <li><kbd>↓（下矢印）</kbd>: 次のオプションにフォーカスを移動します。 必要に応じて、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。</li> + <li><kbd>↑（上矢印）</kbd>: 前のオプションにフォーカスを移動します。 必要に応じて、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。</li> + <li><kbd>Home</kbd>（オプション）: 最初のオプションにフォーカスを移動します。 必要に応じて、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。 5つ以上のオプションを持つリストでは、このキーをサポートすることを強くお勧めします。</li> + <li><kbd>End</kbd>（オプション）: 最後のオプションにフォーカスを移動します。 必要に応じて、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。 5つ以上のオプションを持つリストでは、このキーをサポートすることを強くお勧めします。</li> + <li>先行入力は、全てのリストボックス、特に7つ以上のオプションを持つリストボックスに対してお勧めします。 + <ul> + <li> 文字を入力: フォーカスは、入力された文字で始まる名前を持つ次の項目に移動します。</li> + <li>複数の文字を連続して入力: フォーカスは、入力された文字列で始まる名前を持つ次の項目に移動します。</li> + </ul> + </li> + <li><strong>複数選択</strong>: 作成者は、複数選択をサポートするために2つのインタラクションモデルのいずれかを実装することができます。 ユーザーがリストをナビゲートしながら <kbd>Shift</kbd> や <kbd>Ctrl</kbd> などの修飾キーを押し続けなくてもよい推奨モデルや、選択状態が失われるのを避けるためにナビゲート中に修飾キーを押し続ける必要のある代替モデルがあります。 + <ul> + <li>推奨選択モデル — 修飾キーを押し続ける必要はありません。 + <ul> + <li><kbd>スペース</kbd>: フォーカスされたオプションの選択状態を変更します。</li> + <li><kbd>Shift + ↓（下矢印）</kbd>（オプション）: 次のオプションにフォーカスを移動し、選択状態をトグルします。</li> + <li><kbd>Shift + ↑（上矢印）</kbd>（オプション）: 前のオプションにフォーカスを移動し、選択状態をトグルします。</li> + <li><kbd>Shift + スペース</kbd>（オプション）: 直前に選択した項目からフォーカスされた項目までの連続した項目を選択します。</li> + <li><kbd>Ctrl + Shift + Home</kbd>（オプション）: フォーカスされたオプションから最初のオプションまでの全てのオプションを選択します。 必要に応じて、フォーカスを最初のオプションに移動します。</li> + <li><kbd>Ctrl + Shift + End</kbd> （オプション）: フォーカスされたオプションから最後のオプションまでの全てのオプションを選択します。 必要に応じて、フォーカスを最後のオプションに移動します。</li> + <li><kbd>Ctrl + A</kbd>（オプション）: リスト内の全てのオプションを選択します。 必要に応じて、全てのオプションが選択されている場合は、全てのオプションを非選択にすることもできます。</li> + </ul> + </li> + </ul> + </li> +</ul> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<h4 id="selecting_an_option_in_a_single_select_listbox" name="selecting_an_option_in_a_single_select_listbox">単一選択リストボックスでオプションを選択する</h4> + +<p>ユーザーがオプションを選択すると、以下が起こる必要があります。</p> + +<ol> + <li>前に選択したオプションを非選択にし、<code>aria-selected</code> を <code>false</code> に設定するか、属性を完全に削除して、新しく選択されなくなったオプションの外観を選択されていないように変更する。</li> + <li>新しく選択したオプションを選択し、オプションで <code>aria-selected="true"</code> と設定し、新しく選択されたオプションの外観を選択されているように変更する。</li> + <li>リストボックスの <code>aria-activedescendant</code> の値を、新しく選択したオプションの <code>id</code> に更新する。</li> + <li>オプションのぼかし、フォーカス、選択状態を視覚的に処理する。</li> +</ol> + +<h4 id="Toggling_the_state_of_an_option_in_a_multi_select_listbox" name="Toggling_the_state_of_an_option_in_a_multi_select_listbox">複数選択リストボックスでオプションの状態をトグルする</h4> + +<p>ユーザーがオプションをクリックするか、オプションにフォーカスを当てたときに<kbd>スペース</kbd>を押すか、その他でオプションの状態をトグルすると、以下が起こる必要があります。</p> + +<ol> + <li>現在選択されているオプションの <code>aria-selected</code> ステート（状態）をトグルし、選択されている <code>aria-selected</code> の状態を <code>false</code> なら <code>true</code> に、<code>true</code> なら <code>false</code> に変更する。</li> + <li>選択状態を反映するようにオプションの外観を変更する。</li> + <li>リストボックスの <code>aria-activedescendant</code> の値を、オプションが非選択へトグルされている場合でも、ユーザーが直前に対話したオプションの <code>id</code> に更新します。</li> +</ol> + +<div class="note"> +<p> ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 <code><option></code> 要素を子孫に持つ <code><select></code> 要素は、必要な全てのインタラクションをネイティブに処理します。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h4 class="p1" id="Example_1_A_single_select_listbox_that_uses_aria-activedescendant" name="Example_1_A_single_select_listbox_that_uses_aria-activedescendant">例 1: aria-activedescendant を使用する単一選択リストボックス</h4> + +<p class="p2">以下のスニペットは、<code>listbox</code> ロールが HTML ソースコードに直接どのように追加されるかを示しています。</p> + +<pre class="brush: html"><p id="listbox1label" role="label">色を選択:</p> +<div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label" + onclick="return listItemClick(event);" + onkeydown="return listItemKeyEvent(event);" + onkeypress="return listItemKeyEvent(event);" + aria-activedescendant="listbox1-1"> + <div role="option" id="listbox1-1" class="selected" aria-selected="true">緑</div> + <div role="option" id="listbox1-2">オレンジ</div> + <div role="option" id="listbox1-3">赤</div> + <div role="option" id="listbox1-4">青</div> + <div role="option" id="listbox1-5">紫</div> + <div role="option" id="listbox1-6">ペリウィンクル</div> +</div> +</pre> + +<p>これは、ネイティブの HTML の {{htmlelement("select")}} 要素と {{htmlelement("label")}} 要素でより簡単に処理できます。</p> + +<pre class="brush: html"><label for="listbox1">色を選択:</label> +<select id="listbox1"> + <option selected>緑</option> + <option>オレンジ</option> + <option>赤</option> + <option>青</option> + <option>紫</option> + <option>ペリウィンクル</option> +</select></pre> + +<h4 id="More_examples" name="More_examples">より多くの例</h4> + +<ul> + <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-scrollable.html">スクロール可能なリストボックスの例</a>: 1より大きい <code>size</code> 属性を持つ HTML の <code><select></code> と同様な、スクロールしてより多くのオプションを表示する単一選択リストボックス。（英語）</li> + <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html">折りたたみ可能なドロップダウンリストボックスの例</a>: 属性 <code>size="1"</code> を持つ HTML の <code><select></code> と同様な、アクティブにすると展開される単一選択の折りたたみ可能なリストボックス。（英語）</li> + <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-rearrangeable.html">並べ替え可能なオプションを持つリストボックスの例</a>: オプションの追加、移動、および削除が可能なツールバーが付属する、単一選択リストボックスと複数選択リストボックスの両方の例。（英語）</li> +</ul> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<ul class="ul1"> + <li class="li3">キーボードからアクセス可能にするには、作成者はこのロールの全ての子孫の<a href="https://www.w3.org/TR/wai-aria-1.1/#managingfocus">フォーカスを管理</a>する必要があります。</li> + <li class="li3">リストにフォーカスが当てられていない場合、作成者は選択に異なるスタイリングを使用することが推奨されます。 例えば、非アクティブな選択が、より明るい背景色で表示されることが多い。</li> + <li class="li3">リストボックスが別のウィジェットの一部でない場合は、<code>aria-labelledby</code> プロパティが設定されている必要があります。</li> + <li class="li3">1つ以上のエントリがリストボックスの DOM の子でない場合、追加の <code>aria-*</code> プロパティを設定する必要があります（<a href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">ARIA のベストプラクティス</a>（英語）を参照）。</li> + <li class="li3">リストボックスを<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">展開</a>する正当な理由がある場合、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">combobox</a></code> ロールがより適切かもしれません。</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#listbox","ARIA listbox role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#Listbox","Listbox Role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>HTML {{htmlelement("select")}} 要素</li> + <li>HTML {{htmlelement("label")}} 要素</li> + <li>HTML {{htmlelement("option")}} 要素</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">ARIA: <code>combobox</code> ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Option_Role">ARIA: <code>option</code> ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/list_Role">ARIA: <code>list</code> ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role">ARIA: <code>listitem</code> ロール</a></li> + <li class="li2"><a href="https://www.w3.org/TR/wai-aria-practices/#Listbox">ARIA のベストプラクティス — リストボックス</a>（英語）</li> + <li class="li2"><a href="https://www.w3.org/TR/wai-aria-1.1/#listbox">ARIA のロールモデル — リストボックス</a>（英語）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/listitem_role/index.html b/files/ja/web/accessibility/aria/roles/listitem_role/index.html new file mode 100644 index 0000000000..02c85295f2 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/listitem_role/index.html @@ -0,0 +1,113 @@ +--- +title: 'ARIA: listitem ロール' +slug: Web/Accessibility/ARIA/Roles/Listitem_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Listitem_role +--- +<div>\{{ariaref}}</div> + +<p class="summary">ARIAの <code>listitem</code> ロールは、項目のリスト内の項目を識別するために使用できます。 これは、通常、リストコンテナを識別するために使用される <code>list</code> ロールとともに使用されます。</p> + +<pre class="brush: html"><section role="list"> + <div role="listitem">リスト項目 1</div> + <div role="listitem">リスト項目 2</div> + <div role="listitem">リスト項目 3</div> +</section> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p>外側のコンテナとその内側の要素のリストで構成されるコンテンツは、それぞれ <code>list</code> と <code>listitem</code> のコンテナを使用して支援技術で識別できます。</p> + +<p>リストとリスト項目をマークアップするためにどの要素を使用すべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです。 例えば、買い物リスト、料理の手順、運転の指示。</p> + +<div class="warning"> +<p><strong>警告</strong>: 可能な限り、適切な意味論の HTML 要素を使用して、<code>list</code> とその <code>listitem</code>（{{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}）をマークアップする必要があります。 詳しくは、{{anch("Best practices","ベストプラクティス")}}を参照してください。</p> +</div> + +<h3 id="Associated WAI-ARIA Roles, States, and Properties" name="Associated WAI-ARIA Roles, States, and Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></dt> + <dd> + <p>項目のリスト。 <code>list</code> ロールを持つ要素には、子として <code>listitem</code> ロールを持つ1つ以上の要素、<code>group</code> ロールを持つ1つ以上の要素が必要です。 <code>group</code> ロールを持つ要素は、子として listitem ロールを持つ1つ以上の要素を持ちます。</p> + </dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">group</a></dt> + <dd> + <p>リストにネストされたときにリスト項目に限定される関連オブジェクトのコレクションです。 ページの目次に独自の場所を持つほど重要ではありません。</p> + </dd> +</dl> + +<h3 id="Keyboard Interactions" name="Keyboard Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>無し</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p> <a href="https://www.scottohara.me/blog/2018/05/26/aria-lists.html">ARIA Lists</a> — Scott O'Hara によるいくつかの有用な例と考え（英語）</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>例えば、HTML を制御できないが、JavaScript を使用した後でアクセシビリティを動的に向上させる必要がある場合など、<code>role="list"</code> と <code>role="listitem"</code> のみを使用する必要があります。</p> + +<p>可能な限り、適切な意味論の HTML 要素を使用して、<code>list</code> と <code>listitem</code>（{{htmlelement("ol")}} や {{htmlelement("ul")}} と {{htmlelement("li")}}）をマークアップする必要があります。 例えば、上記の例は次のように書き直すべきです。</p> + +<pre class="brush: html"><ul> + <li>リスト項目 1</li> + <li>リスト項目 2</li> + <li>リスト項目 3</li> +</ul></pre> + +<p>リスト項目の順序が重要な場合は、順序付きリストを使用します。</p> + +<pre class="brush: html"><ol> + <li>リスト項目 1</li> + <li>リスト項目 2</li> + <li>リスト項目 3</li> +</ol></pre> + +<div class="note"> +<p><strong>注</strong>: ARIA の <code>list</code> ロールと <code>listitem</code> ロールでは、順序付きリストと順序無しリストを区別しません。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: タブ付きインターフェースとして機能する項目のリストをマークアップする場合は、代わりに <code>tab</code>、<code>tabpanel</code>、<code>tablist</code> ロールを使用するべきです。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#listitem","listitem")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li> + <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li> + <li><span class="ILfuVd yZ8quc">HTML </span>{{htmlelement("li")}} 要素</li> + <li><span class="ILfuVd yZ8quc">HTML </span>{{htmlelement("ul")}} 要素</li> + <li><span class="ILfuVd yZ8quc">HTML </span>{{htmlelement("ol")}} 要素</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/List_role">ARIA: list ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">ARIA: group ロール</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/main_role/index.html b/files/ja/web/accessibility/aria/roles/main_role/index.html new file mode 100644 index 0000000000..28d6448238 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/main_role/index.html @@ -0,0 +1,131 @@ +--- +title: 'ARIA: main ロール' +slug: Web/Accessibility/ARIA/Roles/Main_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Main_role +--- +<p>{{draft}}\{{ariaref}}</p> + +<p><code>main</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書の主要なコンテンツを示すために使用されます。 メインコンテンツ領域は、文書の中心的な話題と直接に関連したり発展させるコンテンツや、アプリケーションの中心的な機能のコンテンツで構成されます。</p> + +<pre class="brush: html"><div id="main" role="main"> + <h1>アボカド</h1> + <!-- メインセクションのコンテンツ --> +</div> +</pre> + +<p>これは、アボカドについて議論する文書のメインセクションです。 この文書のサブセクションでは、その歴史、品種の違い、栽培地域などを議論することができます。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>main</code> ロールは、文書のメイン（main）コンテンツを識別するナビゲーションに関する<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報をプログラムで表現することができます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。 ランドマークロールを介してナビゲートする場合、<code>main</code> ロールは「メインコンテンツへスキップする」リンクの代わりです。 文書ごとに1つの <code>main</code> ランドマークロールがあるべきです。</p> + +<p>{{htmlelement("main")}} 要素は <code>main</code> ロールを持ちます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p> + +<p>文書とアプリケーションは DOM にネストすることができます。 これにより、DOM の子孫として複数のメイン要素が存在する可能性があります。 このような場合は、<code>aria-owns</code> を組み込んで、文書やアプリケーションの祖先に対するメインの関係を識別します。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre><span class="tag"><body> + <!-- </span>主要なナビゲーション<span class="tag"> --> + + <div role="main"> + <h1></span>第一次インドシナ戦争</<span class="tag">h1></span> + <!-- 記事のコンテンツ --> +<span class="pln"> </span></div> + + <!-- サイドバーとフッター --> +<span class="tag"></body></span> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<h3 id="Use_only_one_main_role_per_document" name="Use_only_one_main_role_per_document">文書ごとに1つの <code>main</code> ロールのみを使用する</h3> + +<p><code>main</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書ごとに1回のみ使用するべきです。</p> + +<p>文書に2つの <code>main</code> ロールが含まれている場合、JavaScript でトリガされたときにページコンテンツを更新するなどで、<code><a href="/ja/docs/Web/HTML/Global_attributes/hidden">hidden</a></code> 属性を切り替えるなどのテクニックによって、非アクティブな <code>main</code> ロールの存在を支援技術から取り除くべきです。</p> + +<pre><span class="tag"><main> + <h1></span>アクティブな<span class="tag"> <code>main</code> </span>要素</<span class="tag">h1> + <!-- </span>コンテンツ<span class="tag"> --> +</main</span> + +<span class="tag"><main hidden> + <h1></span>隠された<span class="tag"> <code>main</code> </span>要素</<span class="tag">h1> + <!-- </span>コンテンツ<span class="tag"> --></span> +<span class="tag"></main></span> +</pre> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> + +<p>{{htmlelement("main")}} 要素を使用すると自動的にセクションが <code>main</code> ロールを持つことを伝えます。 可能であれば、<code><main></code> を代わりに使用することをお勧めします。</p> + +<h3 id="Skip_navigation" name="Skip_navigation">スキップナビゲーション</h3> + +<p>スキップナビゲーション（"skipnav" とも呼ばれる）は、支援技術のユーザーが繰返したコンテンツ（メインナビゲーション、情報バナーなど）の大きなセクションをすばやくバイパスすることを可能にするテクニックです。 これにより、ユーザーはページのメインコンテンツにすばやくアクセスできます。</p> + +<p><code>role="main"</code> という宣言を持つ要素に <code><a href="/ja/docs/Web/HTML/Global_attributes/id">id</a></code> 属性を追加すると、それをスキップナビゲーションリンクのターゲットにすることができます。</p> + +<pre><span class="tag"><body> + <a href="#main-content"></span>メインコンテンツへスキップする<span class="tag"></a> + + <!-- </span>ナビゲーションとヘッダーのコンテンツ<span class="tag"> --> + + <div id="main-content" role="main"> + <!-- </span>メインページのコンテンツ<span class="tag"> --> + </div> +</body></span> +</pre> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> +</ul> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#main","ARIA Main Role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_main","Main Landmark Role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("main")}}: メイン要素</li> + <li><a href="https://www.w3.org/TR/wai-aria/#main">main (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="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-main-element/">The main element | HTML5 Doctor</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/navigation_role/index.html b/files/ja/web/accessibility/aria/roles/navigation_role/index.html new file mode 100644 index 0000000000..80bdc3d70a --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/navigation_role/index.html @@ -0,0 +1,151 @@ +--- +title: 'ARIA: navigation ロール' +slug: Web/Accessibility/ARIA/Roles/Navigation_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary"><code>navigation</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、ウェブサイトまたはページコンテンツをナビゲートするために使用される主要なリンクのグループを識別するために使用されます。</span></p> + +<pre class="brush: html"><div role="navigation" aria-label="メインナビゲーション"> + <!-- 主要なウェブサイトの場所へのリンクのリスト --> +</div> +</pre> + +<p>これはウェブサイトのメインナビゲーションです。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>navigation</code> ロールは<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報がプログラム的に表されます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。 HTML の <code><nav></code> 要素と同様に、<code>navigation</code> ランドマークは、ウェブサイトまたはページコンテンツのナビゲーション（navigation）に使用するリンクのグループ（例えば、リスト）を識別する手段を提供します。 ページに複数の <code>navigation</code> ランドマークが含まれている場合は、それぞれが固有のラベルを持つべきです。 ページ上の2つ以上のナビゲーションに関するランドマークが同じリンクのセットを持つ場合は、それぞれに同じラベルを使用します。</p> + +<p><code>navigation</code> ランドマークを定義するには、HTML5 の {{htmlelement("nav")}} 要素を使用することをお勧めします。 HTML5 の <code><nav></code> 要素のテクニックが使用されていない場合は、<code>role="navigation"</code> 属性を使用して <code>navigation</code> ランドマークを定義します。</p> + +<div class="note"> +<p>{{htmlelement("nav")}} 要素を使用すると、自動的にセクションが <code>navigation </code>ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt>aria-label</dt> + <dd>ナビゲーションの目的を簡単に説明します。 スクリーンリーダーはロールとラベルの内容の両方を読むので、"navigation" という用語を省略します。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>無し</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre><div role="navigation" aria-label="顧客サービス"> + <ul> + <li><a href="#">ヘルプ</a></li> + <li><a href="#">注文追跡</a></li> + <li><a href="#">出荷と配達</a></li> + <li><a href="#">返品</a></li> + <li><a href="#">お問い合わせ</a></li> + <li><a href="#">お店を探す</a></li> + </ul> +</div> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> + +<p>{{htmlelement("nav")}} 要素を使用すると、自動的にセクションが <code>navigation</code> ロールを持つことを伝えます。 可能であれば、<code><nav></code> を代わりに使用することをお勧めします。</p> + +<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> + +<h4 id="Multiple_landmarks" name="Multiple_landmarks">複数のランドマーク</h4> + +<p>文書に複数の <code>navigation</code> ランドマークロールや {{htmlelement("nav")}} 要素がある場合は、各ランドマークに対してラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。</p> + +<pre class="brush: html"><div id="main-nav" role="navigation" aria-label="メイン"> + <!-- コンテンツ --> +</div> + +... + +<nav id="footer-nav" aria-label="フッター"> + <!-- コンテンツ --> +</nav> +</pre> + +<h4 id="Repeated_landmarks" name="Repeated_landmarks">繰り返されるランドマーク</h4> + +<p>文書内の <code>navigation</code> ランドマークロールまたは {{htmlelement("nav")}} 要素が文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、各ランドマークに同じラベルを使用します。 この例では、ページの上部と下部でメインナビゲーションが繰り返されています。</p> + +<pre class="brush: html"><header> + <nav id="main-nav" aria-label="メイン"> + <!-- 主要なウェブサイトの場所へのリンクのリスト --> + </div> +</header> + +... + +<footer> + <nav id="footer-nav" aria-label="メイン"> + <!-- 主要なウェブサイトの場所へのリンクのリスト --> + </nav> +</footer> +</pre> + +<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> + +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>aria-label="主要なナビゲーション"</code> の <code>role="navigation"</code> の宣言は、"navigation 主要なナビゲーション" として重複してアナウンスすることができます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#navigation","ARIA Navigtion Role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_navigation","Navigation Landmark Role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("nav")}}: ナビゲーションセクション要素</li> + <li><a href="https://www.w3.org/TR/wai-aria/#navigation">navigation (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="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/nav-element/">Semantic navigation with the nav element | HTML5 Doctor</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/region_role/index.html b/files/ja/web/accessibility/aria/roles/region_role/index.html new file mode 100644 index 0000000000..d986fecb65 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/region_role/index.html @@ -0,0 +1,138 @@ +--- +title: 'ARIA: region ロール' +slug: Web/Accessibility/ARIA/Roles/Region_role +tags: + - ARIA + - ARIA Role + - 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> + +<pre class="brush: html"><div role="region" aria-label="例"> + <!-- リージョンのコンテンツ --> +</div> +</pre> + +<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> ロールは、ユーザーがそのセクションに簡単にナビゲートし、ページの要約にリストされることを望むほど重要なコンテンツのセクションのために予約するべきです。 <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> ランドマークロールのコンテンツは、文書のメインコンテンツから分離されている場合にも意味をなすべきです。</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> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>無し</p> + +<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> + +<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/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> + +<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> + +<p>文書に複数の <code>region</code> ランドマークロールがある場合は、それぞれにラベルを付けます。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。</p> + +<pre class="brush: html"><div role="region" aria-labeledby="heading"> + <h3 id="use-discretion">慎重に <code>region</code> ロールを使用してください</h3> + <!-- コンテンツ --> +</div> + +... + +<div role="region" aria-labeledby="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> + +<h3 id="Scrolling_content_areas_with_overflow_text" name="Scrolling_content_areas_with_overflow_text">オーバーフローテキストを含むコンテンツ領域のスクロール</h3> + +<p><code>tabindex="0"</code> のコンテンツ領域がある場合は、<code>role="region"</code> を追加して、汎用のリージョンであるとスクリーンリーダーのユーザーに伝えます。 これは、キーボードのみのユーザーがオーバーフローテキストを含むリージョンをスクロールできるようにするためです。</p> + +<h3 id="SVG" name="SVG">SVG</h3> + +<p><a href="/ja/docs/Web/SVG/Element/svg">SVG</a> の個々のセクションを説明できるようにするために、SVG の領域上に <code>role="region"</code> を <code>aria-label</code> とともに宣言することができます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#region","ARIA Region Role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_region","Region landmark role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </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> + +<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="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> diff --git a/files/ja/web/accessibility/aria/roles/role_img/index.html b/files/ja/web/accessibility/aria/roles/role_img/index.html new file mode 100644 index 0000000000..748b3e3f47 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/role_img/index.html @@ -0,0 +1,125 @@ +--- +title: 'ARIA: img ロール' +slug: Web/Accessibility/ARIA/Roles/Role_Img +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Role_Img +--- +<div>\{{ariaref}}</div> + +<p>ARIA の <code>img</code> ロールは、単一の画像とみなすべきページコンテンツ内の複数の要素を識別するために使用できます。 これらの要素は、画像、コードスニペット、テキスト、絵文字、または視覚的に情報を伝達するために組み合わせることができる他のコンテンツであってもよい。</p> + +<pre class="brush: html"><div role="img" aria-label="全体的な画像の説明"> + <img src="graphic1.png" alt=""> + <img src="graphic2.png"> +</div> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>role="img"</code> を使用すると、単一の画像（画像、動画、音声、コードスニペット、絵文字、その他のコンテンツを含む）として消費されるべきコンテンツの集合を識別できます。</p> + +<p>支援技術へのコンテキストを伝えるために個々の画像要素の代替テキストを数えるべきではありません。 ほとんどのスクリーンリーダーは、<code>role="img"</code> を持つ要素をブラックボックスのように見て、内部の個々の要素にはアクセスしません。 したがって、周囲のテキストのいずれか、または <code>aria-label</code> 属性を使用して画像の包括的な全体説明的な代替テキストを提供します。 画像が欠ける場合は、検索エンジンまたはサイトユーザーのためのオプションの <code>alt</code> 属性を使用してページに書きます。</p> + +<pre class="brush: html"><div role="img" aria-label="全体的な画像の説明"> + <img src="graphic1.png" alt=""> + <img src="graphic2.png"> +</div></pre> + +<p>ページに表示される画像にキャプションまたはラベルを追加する場合は、次の方法を使用できます。</p> + +<ul> + <li>テキストが簡潔なラベルの場合は、<code>aria-labelledby</code>。</li> + <li>テキストがより長い説明である場合は、<code>aria-describedby</code>。</li> +</ul> + +<p>例えば、</p> + +<pre class="brush: html"><div role="img" aria-labelledby="image-1"> + ... + <p id="image-1">画像のグループを説明するテキスト。</p> +</div<strong>></strong></pre> + +<h3 id="SVG_and_roleimg" name="SVG_and_roleimg">SVG と role="img"</h3> + +<p>ページに埋め込み SVG 画像を使用している場合は、外側の <code><svg></code> 要素で <code>role="img"</code> を設定し、ラベルを付けることをお勧めします。 これにより、スクリーンリーダーは全ての子ノードを読み出すのではなく、単一の実体とみなし、ラベルを使用して説明します。</p> + +<pre class="brush: html"><svg role="img" aria-label="SVG 画像の説明"> + <!-- SVG 画像の内容 --> +</svg></pre> + +<h3 id="Using_roleimg_to_confer_meaning_that_is_obscured_or_implied" name="Using_roleimg_to_confer_meaning_that_is_obscured_or_implied">role="img" を使用して、不明瞭や暗黙なものに意味を付与する</h3> + +<p>場合によっては、支援技術ユーザーは、特定の方法で、特定のメディアを通して、または特定の方法で暗示された内容の意味を得ることができません。 これは画像の場合では直すのは明らかです（<code>alt</code> 属性を使うことができます）が、混在したコンテンツや他の特定の種類のコンテンツの場合はそれほど明白ではないので、<code>role="img"</code> が有効になります。</p> + +<p>例えば、テキストに絵文字を使用した場合、その意味は目の見えるユーザーにとっては明白かもしれませんが、スクリーンリーダーを使用している人は、絵文字はテキスト表現を全く持たないか、代替テキストが紛らわしく、使用されているコンテキストと一致しない可能性があります。 例えば、次のコードです。</p> + +<pre class="brush: html"><div role="img" aria-label="その猫はとても面白い"> + <p> + &#x1F408; &#x1F602; + </p> +</div></pre> + +<p>&#x1F408; &#x1F602; の絵文字の実体参照は「猫」と「涙が出るほど嬉しい顔」で読み上げられますが、これは必ずしも意味をなしません — 暗黙の意味はおそらく「その猫はとても面白い」で、それを <code>aria-label</code> で <code>role="img"</code> と一緒に指定します。</p> + +<p>これはブラウザーやスクリーンリーダーの組み合わせによっては正常に動作するように見えますが、その中にはラベルを2度読んでしまうものもあります。 慎重に使用し、十分にテストしてください。</p> + +<p>これが適している別の例は、伝説的な「ちゃぶ台返し」のような ASCII 絵文字の組み合わせを使用する場合です。</p> + +<pre class="brush: html"><div role="img" aria-label="ちゃぶ台返し"> + <p> + (╯°□°）╯︵ ┻━┻ + </p> +</div></pre> + +<p> </p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt>aria-label</dt> + <dd>アクセス可能な名前が必要です。 aria-label 属性</dd> + <dd> </dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p> </p> + +<p> </p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<h2 id="Examples" name="Examples">例</h2> + +<ul> + <li><a href="https://codepen.io/svinkle/pen/oYjoNE">星評価、role="img"の例</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#img","img")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li> + <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/row_role/index.html b/files/ja/web/accessibility/aria/roles/row_role/index.html new file mode 100644 index 0000000000..8cb4b15f96 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/row_role/index.html @@ -0,0 +1,231 @@ +--- +title: 'ARIA: row ロール' +slug: Web/Accessibility/ARIA/Roles/Row_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Row_Role +--- +<div>\{{ariaref}}</div> + +<p><code>role="row"</code> の要素は、表形式の構造内のセルの行（row）です。 行には、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></code> 内の1つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。 オプションで <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code> 内にも含まれます。</p> + +<pre class="brush: html"><div role="table" aria-label="人口" aria-describedby="country_population_desc"> + <div id="country_population_desc">国別世界人口</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader" aria-sort="descending">国</span> + <span role="columnheader"aria-sort="none">人口</span> + </div> + </div> + <div role="rowgroup"> + <div role="row"> + <span role="cell">フィンランド</span> + <span role="cell">550 万</span> + </div> + <div role="row"> + <span role="cell">フランス</span> + <span role="cell">6700 万</span> + </div> + </div> +</div> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>role="row"</code> を持つ要素は、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></code> 内の行で、オプションで <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code> 内の行です。 行は、静的な表構造内の1つ以上の <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></code>、<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role"><code>gridcell</code></a>、<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role"><code>columnheader</code></a>、<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role"><code>rowheader</code></a> のコンテナです。 可能であれば、ネイティブな <a href="/ja/docs/Web/HTML/Element/tr">HTML <code><tr></code></a> 要素を使用することを強く推奨します。</p> + +<p>ARIA の行を作成するには、コンテナ要素に <code>role="row"</code> を追加します。 その行は、<code>grid</code>、<code>table</code>、<code>treegrid</code> 内にネストするべきです。 行のグループは、<code>grid</code>、<code>table</code>、<code>treegrid</code> 内に直接ネストすることができますし、これらのコンテナ内の <code>rowgroup</code> 内に配置することもできます。 それぞれの行には子のセルが含まれています。 これらのセルは、列ヘッダーや行ヘッダーやグリッドセルや普通のセルの異なるタイプのセルにすることができます。</p> + +<p>行には、<code>aria-colindex</code>、<code>aria-level</code>、<code>aria-rowindex</code>、<code>aria-selected</code> など、行のロールを明確にする属性だけでなく、多くの属性を含めることができます。</p> + +<p>行が <code>treegrid</code> 内にある場合、現在の状態を示す属性を使用して行を展開可能にするため、行に <code>aria-expanded</code> 属性を含めることができます。 これは、<code>aria-expanded</code> 属性が存在しない通常の <code>table</code> や <code>grid</code> の場合には当てはまりません。</p> + +<p>表形式の構造を持つ対話型のウィジェットを作成するには、代わりに <code>grid</code> のパターンを使用します。 インタラクションが個々のセルの選択状態を提供する場合や、上下左右のナビゲーションが提供されている場合や、ユーザインタフェースがセル順序の再配置を許可する場合や、ドラッグアンドドロップなどで個々のセル順序の変更が可能な場合は、代わりに <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code> や <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></code> を使用します。</p> + +<div class="note"> +<p>注: 可能であれば、表の行要素（<code><tr></code>）と共にネイティブな HTML 表要素（<code><table></code>）を使用することを強く推奨します。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<h4 id="Context_Roles" name="Context_Roles">コンテキストロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">role="rowgroup"</a></dt> + <dd>オプションのコンテキスト上の行の親で、子孫となる行との間に関係を確立します。 これは、HTML 表要素の <code>thead</code>、<code>tfoot</code>、<code>tbody</code> 要素と構造的に同等です。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">role="table"</a></dt> + <dd><code>grid</code> と <code>treegrid</code> と共に行が見つかる3つの可能なコンテキストの1つで、行がネイティブな <code><table></code> HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部であることを識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">role="grid"</a></dt> + <dd><code>table</code> と <code>treegrid</code> と共に行が見つかる3つの可能なコンテキストの1つで、行がネイティブな <code><table></code> HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部であることを識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridtree_Role">role="treegrid"</a></dt> + <dd><code>grid</code> に似ていますが、<code>tree</code> と同じ方法で展開や折りたたみができる行があります。</dd> +</dl> + +<h4 id="Descendant_Roles" name="Descendant_Roles">子孫のロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">role="cell"</a></dt> + <dd>表形式のコンテナ内の行内のセル。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">role="gridcell"</a></dt> + <dd><code>grid</code> 内または <code>treegrid</code> 内の行内のセル。</dd> + <dt>role="columnheader"</dt> + <dd>列スコープを持つ HTML <code><th></code> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、<code>columnheader</code> ロールは、対応する列の全てのセルとの関係を確立します。</dd> + <dt>role="rowheader"</dt> + <dd>行スコープを持つ HTML <code><th></code> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、<code>rowheader</code> ロールは、対応する行の全てのセルとの関係を確立します。</dd> +</dl> + +<h4 id="States_and_Properties" name="States_and_Properties">ステートとプロパティ</h4> + +<dl> + <dt>aria-expanded ステート</dt> + <dd> + <p>行の状態を定義する <code>aria-expanded</code> 属性は、次の3つの値のいずれかを取るか省略することができます。</p> + + <ul> + <li><code>aria-expanded="true</code>: 行は現在展開されています。</li> + <li><code>aria-expanded="false"</code>: 行は現在折りたたまれています。</li> + <li><code>aria-expended="undefined"</code>、または属性がない: 行は展開も折りたたみもできません。</li> + </ul> + + <p><code>aria-expanded</code> 属性を持つ要素が、要素が '所有していない' 別のグループ化コンテナの展開を制御する場合、<code>aria-controls</code> 属性を使用してコンテナを参照するべきです（SHOULD）。</p> + </dd> + <dt>aria-selected ステート</dt> + <dd><code>grid</code> や <code>treegrid</code> などの対話型のコンテナ内に行がある場合のみ関連し、行が <code>table</code> の行の場合は関連しません。 <code>aria-selected</code> 属性は、次の3つの値のいずれかを取るか省略することができます。 + <ul> + <li><code>aria-selected="true</code>: 行は現在選択されています。</li> + <li><code>aria-selected="false"</code>: 行は現在選択されていません。</li> + <li><code>aria-selected="undefined"</code>、または属性がない: 行は選択できません。</li> + </ul> + </dd> + <dt>aria-colindex 属性</dt> + <dd> + <p><code>aria-colindex</code> 属性は、列が DOM から隠されている場合にのみ必要であり、一般的に行に置くことができるときに表示される列が連続していない限り、行自体ではなく行の子に配置されます。<br> + <br> + この属性は、値として、1 と <code>table</code>、<code>grid</code>、<code>treegrid</code> 内の全列数の間の整数をとります。 <code>aria-colindex</code> は、行に配置されると、行内の全列数に対する要素の列インデックスまたは位置を定義します。 たとえば、表内に 15 列あり、4、5、6 列のみが DOM にある場合、全ての行に <code>aria-colindex="4"</code> を設定できます。<br> + <br> + DOM に存在する列のセットが連続して<strong>いない</strong>場合や、複数の行や列にまたがるセルがある場合は、行自体ではなく各行の全ての子に <code>aria-colindex</code> を配置します。</p> + + <p>全ての列が DOM 内にある場合、この属性は必要ありません。</p> + </dd> + <dt>aria-rowindex 属性</dt> + <dd> + <p><code>aria-rowindex</code> 属性は、行が DOM から隠されている場合にのみ必要で、全行のリスト内のどの行が読み込まれているかを示します。 属性は、それぞれの行に一意の値が設定され、値として、1 と <code>table</code>、<code>grid</code>、<code>treegrid</code> 内の全行数の間の整数をとり、各行の位置またはインデックスを示します。 たとえば、テーブル内に 1,500 行があり、47 行目と 52 行目とヘッダーのみが DOM にある場合は、ヘッダー行に <code>aria-rowindex="1"</code> が設定され、47 行目と 52 行目にそれぞれ <code>aria-rowindex="47"</code> と <code>aria-rowindex="52"</code> が設定されます。</p> + + <p>全ての行が DOM に存在する場合、この属性は必要ありません。</p> + </dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> +</dl> + +<p>無し。 ソート可能な列については、<code>columnheader</code> ロールを参照してください。</p> + +<div class="note"> +<p>ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能であれば、ARIA の <code>table</code> ロールの代わりに HTML の <code><table></code> 要素を使用してください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><div role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <div id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader" aria-sort="none">ARIA のロール</span> + <span role="columnheader" aria-sort="none">意味論的な要素</span> + </div> + </div> + <div role="rowgroup"> + <div role="row" aria-rowindex="11"> + <span role="cell">header</span> + <span role="cell">h1</span> + </div> + <div role="row" aria-rowindex="16"> + <span role="cell">header</span> + <span role="cell">h6</span> + </div> + <div role="row" aria-rowindex="18"> + <span role="cell">rowgroup</span> + <span role="cell">thead</span> + </div> + <div role="row" aria-rowindex="24"> + <span role="cell">term</span> + <span role="cell">dt</span> + </div> + </div> +</div> +</pre> + +<p>上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 ヘッダー行は、ヘッダーの <code>rowgroup</code> 内に単独であり、2 つの列ヘッダーを持ちます。 列はソート可能ですが、<code>aria-sort</code> プロパティで示されているように、現在はソートされていません。 表の本体は別の <code>rowgroup</code> にあり、現在 DOM 内に 4 行あります。 全ての行が DOM 内にあるわけではないため、全ての行に <code>aria-rowindex</code> プロパティを追加しました。</p> + +<p> </p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>データ表構造には、<code>table</code>、<code>tbody</code>、<code>thead</code>、<code>tr</code>、<code>th</code>、<code>td</code> などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA の <code>table</code> ロールの関連するユースケースは、<code>display: grid</code> など、CSS の <code>display</code> プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の <code>table</code> ロールを使用して意味論を戻すことができます。</p> + +<pre class="brush: html"><table role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <caption id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</caption> + <thead role="rowgroup"> + <tr role="row"> + <th role="columnheader" aria-sort="none">ARIA のロール</th> + <th role="columnheader" aria-sort="none">意味論的な要素</th> + </tr> + </thead> + <tbody role="rowgroup"> + <tr role="row" aria-rowindex="11"> + <td role="cell">header</td> + <td role="cell">h1</td> + </tr> + <tr role="row" aria-rowindex="16"> + <td role="cell">header</td> + <td role="cell">h6</td> + </tr> + <tr role="row" aria-rowindex="18"> + <td role="cell">rowgroup</td> + <td role="cell">thead</td> + </tr> + <tr role="row" aria-rowindex="24"> + <td role="cell">term</td> + <td role="cell">dt</td> + </tr> + </tbody> + </table></pre> + +<p>上記は表を書く意味論的な方法です。 ARIA のロールは、表のネイティブな意味論の場合にのみ必要です。 したがって、<a href="/ja/docs/Web/CSS/display#Accessibility_concerns">display プロパティを flex または grid</a> に設定すると表の行が消されます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>無し</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#row","ARIA row role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#row","ARIA row role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Element/tr">HTML 表の行要素</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/rowgroup_role/index.html b/files/ja/web/accessibility/aria/roles/rowgroup_role/index.html new file mode 100644 index 0000000000..56fdbe4014 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/rowgroup_role/index.html @@ -0,0 +1,163 @@ +--- +title: 'ARIA: rowgroup ロール' +slug: Web/Accessibility/ARIA/Roles/Rowgroup_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Rowgroup_Role +--- +<div>\{{ariaref}}</div> + +<p>role="rowgroup" を持つ要素は、表構造内の行（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></code>）のグループです。 行グループ（<code>rowgroup</code>）には、グリッド(<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>)、表（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>）、またはツリーグリッド（<code>treegrid</code>）内のセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></code>）、グリッドセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></code>）、列ヘッダー（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">columnheader</a></code>）、または行ヘッダー（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/rowheader_Role">rowheader</a></code>）の1つ以上の行が含まれます。</p> + +<pre class="brush: html"><div role="table" aria-label="人口" aria-describedby="country_population_desc"> + <div id="country_population_desc">国別世界人口</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader" aria-sort="descending">国</span> + <span role="columnheader" aria-sort="none">人口</span> + </div> + </div> + <div role="rowgroup"> + <div role="row"> + <span role="cell">フィンランド</span> + <span role="cell">550 万</span> + </div> + <div role="row"> + <span role="cell">フランス</span> + <span role="cell">6700 万</span> + </div> + </div> +</div> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p>行グループ（<code>rowgroup</code>）は、所有する行（row）の要素間の関係を確立し、HTML の表ヘッダー（{{htmlelement("thead")}}）、表フッター（{{htmlelement("tfoot")}}） 、および表本体（{{htmlelement("tbody")}}）の要素と構造的に同等です。 ただし、異なる種類の行グループを区別することはできません。 それらの要素は、表（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>）またはグリッド（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>）のロールを持つ要素に含まれているか、またはそれらの要素によって所有されている必要があります。 可能な限り、ネイティブの {{htmlelement("thead")}}、{{htmlelement("tfoot")}} 、および {{htmlelement("tbody")}} HTML 要素を使用することを強くお勧めします。</p> + +<p>ARIA の表ヘッダー、表フッター、または表本体を作成するには、<code>role="rowgroup"</code> を要素に追加します。 その行グループは、1つ以上の行のグループを含むグリッド、表、またはツリーグリッド内にネストする必要があります。 各行には子セルが含まれています。 これらのセルは、列ヘッダーか行ヘッダーか、プレーンなセルかグリッドセルかによって、さまざまなタイプにすることができます。</p> + +<div class="note"> +<p><strong>注</strong>: 可能であれば、ネイティブの HTML 表要素（<code><table></code>）を表ヘッダー（<code><thead></code>）、表フッター（<code><tfoot></code>）、および表本体（<code><tbody></code>）の要素と共に使用することを強くお勧めします。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<h4 id="Context_Roles" name="Context_Roles">コンテキストロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">role="table"</a></dt> + <dd>行を見つけることができる3つのコンテキスト（グリッドとツリーグリッドを含む）の1つで、ネイティブの <code><table></code> HTML 要素と同様に、行と列に配列されたデータを含む非インタラクティブな表構造の一部として行を識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">role="grid"</a></dt> + <dd>行を見つけることができる3つのコンテキスト（表とツリーグリッドを含む）の1つで、ネイティブの <code><table></code> HTML 要素と同様に、行と列に配列されたデータを含む非インタラクティブな表構造の一部として行を識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">role="treegrid"</a></dt> + <dd>グリッドと似ていますが、ツリーの場合と同じ方法で行を展開したり折りたたんだりすることができます。</dd> +</dl> + +<h4 id="Descendant_Roles" name="Descendant_Roles">子孫のロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">role="row"</a></dt> + <dd>表構造内のセルの行。 行には、1つ以上のセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></code>）、グリッドセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></code>）、または列ヘッダー（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">columnheader</a></code>）が含まれ、場合によっては行ヘッダー（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/rowheader_Role">rowheader</a></code>）も含まれます。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>無し。</p> + +<div class="note"> +<p>ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを<strong>追加して</strong>アクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能な限り、ARIA の <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code> ロールの代わりに HTML の {{htmlelement("table")}} 要素を使用してください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><div role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <div id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader" aria-sort="none">ARIA のロール</span> + <span role="columnheader" aria-sort="none">意味論的な要素</span> + </div> + </div> + <div role="rowgroup"> + <div role="row" aria-rowindex="11"> + <span role="cell">header</span> + <span role="cell">h1</span> + </div> + <div role="row" aria-rowindex="16"> + <span role="cell">header</span> + <span role="cell">h6</span> + </div> + <div role="row" aria-rowindex="18"> + <span role="cell">rowgroup</span> + <span role="cell">thead</span> + </div> + <div role="row" aria-rowindex="24"> + <span role="cell">term</span> + <span role="cell">dt</span> + </div> + </div> +</div> +</pre> + +<p>上記は、表ヘッダーと表本体を持つ非意味論的な ARIA の表で、DOM には81行のうち5行が含まれています。 表ヘッダー内に1行、表本体内に4行あります。 ヘッダー行は、ヘッダーの行グループに単独であり、2つの列ヘッダーを持ちます。 <code>aria-sort</code> プロパティで示されるように、列はソート可能ですが、現在はソートされていません。 表本体は独立した行グループで、現在 DOM には4行あります。 すべての行が DOM 内にあるわけではないので、すべての行に <code>aria-rowindex</code> プロパティを含めました。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>データ表構造には、{{htmlelement("table")}}、{{htmlelement("tbody")}}、{{htmlelement("thead")}}、{{htmlelement("tr")}}、{{htmlelement("th")}}、{{htmlelement("td")}} などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA の <code>table</code> ロールの関連するユースケースは、<code>display: grid</code> など、CSS の {{cssxref("display")}} プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の <code>table</code> ロールを使用して意味論を戻すことができます。</p> + +<pre class="brush: html"><table role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <caption id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</caption> + <thead role="rowgroup"> + <tr role="row"> + <th role="columnheader" aria-sort="none">ARIA のロール</th> + <th role="columnheader" aria-sort="none">意味論的な要素</th> + </tr> + </thead> + <tbody role="rowgroup"> + <tr role="row" aria-rowindex="11"> + <td role="cell">header</td> + <td role="cell">h1</td> + </tr> + <tr role="row" aria-rowindex="16"> + <td role="cell">header</td> + <td role="cell">h6</td> + </tr> + </tbody> + </table></pre> + +<p>上記は表を書く意味論的な方法です。 ARIA のロールは、表のネイティブな意味論の場合にのみ必要です。 したがって、<a href="/ja/docs/Web/CSS/display#Accessibility_concerns"><code>display</code> プロパティを <code>flex</code> または <code>grid</code> に</a>設定すると表の行が消されます。<br> + </p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>無し</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#rowgroup","ARIA rowgroup role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Element/table">HTML の表</a></li> + <li><a href="/ja/docs/Web/HTML/Element/tbody">HTML の表本体</a></li> + <li><a href="/ja/docs/Web/HTML/Element/tfoot">HTML の表フッター</a></li> + <li><a href="/ja/docs/Web/HTML/Element/thead">HTML の表ヘッダー</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/search_role/index.html b/files/ja/web/accessibility/aria/roles/search_role/index.html new file mode 100644 index 0000000000..df6ac80cd3 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/search_role/index.html @@ -0,0 +1,122 @@ +--- +title: 'ARIA: search ロール' +slug: Web/Accessibility/ARIA/Roles/Search_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Search_role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary"><code>search</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、ページ、サイト、またはサイトのコレクションを検索するために使用されるページのセクションを識別するために使用されます。</span></p> + +<pre class="brush: html"><form role="search"> + <!-- 検索入力 --> +</form> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>search</code> ロールは<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマーク</a>です。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 <code>search</code> ロールは、全体として結合して検索（search）機能を作成するアイテムおよびオブジェクトを包含するコンテナ要素に追加します。 <code><form></code> が検索フォームの場合、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></code> ロールの代わりに <code>search</code> ロールを使用します。 文書に複数の検索が含まれている場合、それぞれに固有のラベルを持つべきです。 <a href="/ja/docs/Web/HTML/Element/input/search"><code>search</code> 型の <code><input></code> 要素</a>があるなら、<code>search</code> ランドマークを定義する HTML 要素があります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre><span class="tag"><form id="search" role="search"> +</span> <label for="search-input">このサイトを検索</label> + <input type="search" id="search-input" name="search" spellcheck="false"> + <input value="検索する" type="submit"> +<span class="tag"></form></span> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> + +<p>{{htmlelement("form")}} 要素を <code>role="search"</code> の宣言とともに使用すると、最大限のサポートが得られます。</p> + +<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> + +<h4 id="Multiple_landmarks" name="Multiple_landmarks">複数のランドマーク</h4> + +<p>文書に複数の <code>search</code> ランドマークロールがある場合は、各ランドマークに対してラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。</p> + +<pre class="brush: html"><form id="site-search" role="search" aria-label="サイト全体"> + <!-- 検索入力 --> +</form> + +... + +<form id="page-search" role="search" aria-label="このページ"> + <!-- 検索入力 --> +</form> +</pre> + +<h4 id="Repeated_landmarks" name="Repeated_landmarks">繰り返されるランドマーク</h4> + +<p>文書内の <code>search</code> ランドマークロールが文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、各ランドマークに同じラベルを使用します。 この例では、ページの上部と下部でサイト全体の検索が繰り返されています。</p> + +<pre class="brush: html"><header> + <form id="site-search" role="search" aria-label="サイト全体"> + <!-- 検索入力 --> + </form> +</header> + +... + +<footer> + <form id="site-search" role="search" aria-label="サイト全体"> + <!-- 検索入力 --> + </form> +</footer> +</pre> + +<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> + +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>aria-label="サイト全体の検索"</code> の <code>role="search"</code> の宣言は、"search サイト全体の検索" として重複してアナウンスすることができます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#search","ARIA search role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_search","ARIA search role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("form")}}: フォーム要素</li> + <li><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></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="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> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/switch_role/index.html b/files/ja/web/accessibility/aria/roles/switch_role/index.html new file mode 100644 index 0000000000..ea926c66ec --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/switch_role/index.html @@ -0,0 +1,187 @@ +--- +title: 'ARIA: switch ロール' +slug: Web/Accessibility/ARIA/Roles/Switch_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Switch_role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary">ARIA の <code>switch</code> ロールは、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code> ロールと機能的に同じですが、"checked" と "unchecked" の状態を表す代わりに、その意味ではかなり一般的なもので、<code>switch</code> ロールは、「オン」と「オフ」の状態を表します。</span></p> + +<p>この例では、ウィジェットを作成し、ARIA の <code>switch</code> ロールを割り当てます。</p> + +<pre><button role="switch" aria-checked="true" + id="speakerPower" class="switch"> + <span>オフ</span> + <span>オン</span> + </button> + <label for="speakerPower" class="switch">スピーカー電源</label></pre> + +<h2 id="Description" name="Description">説明</h2> + +<p>ARIA の <code>switch</code> ロールは、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code> ロールと同じですが、"checked" や "unchecked" ではなく、「オン」と「オフ」のどちらかです。 <code>checkbox</code> ロールと同様に、<code>aria-checked</code> 属性が必要です。 可能な2つの値は <code>true</code> と <code>false</code> です。 <code><checkbox></code> や <code>role="checkbox"</code> とは異なり、不確定な状態（<code>indeterminate</code>）や混在した状態（<code>mixed</code>）はありません。 <code>switch</code> ロールは、<code>aria-checked</code> 属性に <code>mixed</code> の値をサポートしていません。 <code>switch</code> に <code>mixed</code> の値を割り当てると、代わりに値を <code>false</code> に設定します。</p> + +<p>支援技術は、オン/オフスイッチの概念を反映するために、スイッチウィジェットを専門化したプレゼンテーションで表現することを選択することができます。</p> + +<p>スイッチはインタラクティブなコントロールなので、フォーカス可能でキーボードによりアクセス可能でなければなりません。 ロールがフォーカス可能でない要素に適用されている場合は、<code>tabindex</code> 属性を使用してこれを変更します。 スイッチの値を切り替えるために必要なキーボードショートカットは<kbd>スペース</kbd>キーです。 開発者は、スイッチがトグルされたときに、<code>aria-checked</code> 属性の値を動的に変更する必要があります。</p> + +<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><code>aria-checked</code> 属性</dt> + <dd><code>aria-checked</code> 属性は、<code>switch</code> ロールを使用する場合に<strong>必要</strong>です。 これは、<code>switch</code> ロールが適用されているウィジェットの現在の状態を表すためです。 <code>true</code> の値は「オン」状態を表します。 <code>false</code> の値は「オフ」状態を表します。 <code>mixed</code> の値は <code>switch</code> ロールでサポートされておらず、<code>false</code> として扱われます。 デフォルト値は <code>false</code> です。</dd> + <dt><code>aria-readonly</code> 属性</dt> + <dd><code>aria-readonly</code> 属性は、<code>switch</code> ロールでサポートされています。 ウィジェットの状態がユーザーによって編集可能かどうかを示します。 <code>false</code> の値は、ユーザーがウィジェットの状態を変更できることを意味します。 <code>true</code> の値は、ユーザーがウィジェットの状態を変更できないことを意味します。 デフォルト値は <code>false</code> です。</dd> +</dl> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> + <dt><code>click</code> イベントのハンドラ</dt> + <dd>ユーザーがスイッチウィジェットをクリックすると、<a href="/ja/docs/Web/Reference/Events/click"><code>click</code> イベント</a>が発生します。 これは、ウィジェットの状態を変更するために処理する必要があります。</dd> + <dt><code>aria-checked</code> 属性の変更</dt> + <dd>スイッチウィジェットで <code>click</code> イベントが発生した場合、ハンドラは <code>aria-checked</code> 属性の値を <code>true</code> から <code>false</code> やその逆に変更する必要があります。</dd> +</dl> + +<h2 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h2> + +<p><code>switch</code> ロールが要素に追加されると、{{Glossary("user agent","ユーザーエージェント")}}は次のようにそれを処理します。</p> + +<ul> + <li>要素は、<code>switch</code> ロールを持つものとしてシステムのアクセシビリティインフラストラクチャに公開されます。</li> + <li><code>aria-checked</code> 属性の値が変更されると、アクセス可能なイベントが使用可能で、<code>switch</code> ロールをサポートしている場合、アクセス可能なイベントがシステムのアクセシビリティ API を使用して起動されます。</li> + <li>switch ロールが適用された要素の子孫であるすべての要素には、ロールのプレゼンテーションが自動的に割り当てられます。 これにより、スイッチを構築するために使用する要素が、支援技術によって個別に相互作用するのを防ぎます。 これらの要素のテキストは、{{cssxref("display", "display: none")}} または aria-hidden="true" を使用して明示的に隠されていない限り、ユーザーエージェントに表示されたままになり、ユーザーが読んだり、別の方法で届けられる可能性があります。</li> +</ul> + +<p>支援技術は、<code>switch</code> ロールをサポートしている場合は、次のように応えます。</p> + +<ul> + <li>スクリーンリーダーは、要素をスイッチとしてアナウンスする必要があります。 オプションでスイッチをアクティブにする方法についての指示を提供します。</li> +</ul> + +<div class="note"> +<p>支援技術がこのロールをどのように処理すべきかについて、さまざまな意見があります。 上記は推奨される方法であり、他の情報源とは異なる場合があります。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次の例は、<code>switch</code> ロールを適用して使用する方法を理解するのに役立ちます。</p> + +<h3 id="Adding_the_switch_role_in_ARIA" name="Adding_the_switch_role_in_ARIA">ARIA で switch ロールを追加する</h3> + +<p>この単純な例では、ウィジェットを作成して ARIA の <code>switch</code> ロールを割り当てます。 このボタンは、オン/オフの電源スイッチを連想させるような外観になっています。</p> + +<h4 id="HTML" name="HTML">HTML</h4> + +<p>HTML はここではかなり簡単です。 スイッチは {{HTMLElement("button")}} 要素として実装され、最初に <code>aria-checked</code> 属性が <code>"true"</code> に設定されているかどうかチェックされます。 スイッチには、"off" と "on" のラベルを含む2つの子要素があり、スイッチを識別する {{HTMLElement("label")}} が続きます。</p> + +<pre class="brush: html"><button role="switch" aria-checked="true" + id="speakerPower" class="switch"> + <span>off</span> + <span>on</span> +</button> +<label for="speakerPower" class="switch">Speaker power</label> +</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<p>この JavaScript コードは、スイッチウィジェットの <code>click</code> イベントを処理する関数を定義して適用します。 この関数は、<code>aria-checked</code> 属性を <code>true</code> から <code>false</code> やその逆に変更します。</p> + +<pre class="brush: js">document.querySelectorAll(".switch").forEach(function(theSwitch) { + theSwitch.addEventListener("click", handleClickEvent, false); +}); + +function handleClickEvent(evt) { + let el = evt.target; + + if (el.getAttribute("aria-checked") == "true") { + el.setAttribute("aria-checked", "false"); + } else { + el.setAttribute("aria-checked", "true"); + } +}</pre> + +<h4 id="CSS" name="CSS">CSS</h4> + +<p>CSS の目的は、電源スイッチのパラダイムを思い起こさせるスイッチのルックアンドフィールを確立することです。</p> + +<pre class="brush: css">button.switch { + margin: 0; + padding: 0; + width: 60px; + height: 26px; + border: 2px solid black; + display: inline-block; + margin-right: 0.25em; + line-height: 20px; + vertical-align: middle; + text-align: center; + font: 12px "Open Sans", "Arial", serif; +} + +button.switch span { + padding: 0 4px;} + +[role="switch"][aria-checked="false"] :first-child, +[role="switch"][aria-checked="true"] :last-child { + background: #262; + color: #eef; +} + +[role="switch"][aria-checked="false"] :last-child, +[role="switch"][aria-checked="true"] :first-child { + color: #bbd; +} + +label.switch { + font: 16px "Open Sans", "Arial", sans-serif; + line-height: 20px; + user-select: none; + vertical-align: middle; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +}</pre> + +<p>最も興味深いのは、おそらく属性セレクタと {{cssxref(":first-child")}} と {{cssxref(":last-child")}} の擬似クラスを使用して、スイッチのオン/オフに応じてスイッチの外観を変えるということです。</p> + +<h4 id="Result" name="Result">結果</h4> + +<p>結果は次のようになります。</p> + +<p>{{EmbedLiveSample("Adding_the_switch_role_in_ARIA", 600, 40)}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ARIA', '#switch')}}</td> + <td>{{Spec2('ARIA')}}</td> + <td>一般的に ARIA をすべてのロール、プロパティなどとともに定義します。</td> + </tr> + <tr> + <td>{{SpecName('ARIA in HTML', '#index-aria-switch')}}</td> + <td>{{Spec2('ARIA in HTML')}}</td> + <td>ARIA の機能を HTML に統合する方法について説明します。</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role">ARIA: checkbox ロール</a></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/table_role/index.html b/files/ja/web/accessibility/aria/roles/table_role/index.html new file mode 100644 index 0000000000..4d98392f80 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/table_role/index.html @@ -0,0 +1,154 @@ +--- +title: 'ARIA: table ロール' +slug: Web/Accessibility/ARIA/Roles/Table_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Table_Role +--- +<div>\{{ariaref}}</div> + +<p>ARIA の role 属性の table 値は、このロールを含む要素を、ネイティブの {{htmlelement("table")}} HTML 要素と同様に、行と列に配置されたデータを含む非インタラクティブな表構造を持つものとして識別します。</p> + +<pre class="brush: html"><div role="table" aria-label="意味論的な表の要素" aria-describedby="semantic_table_desc"> + <div id="semantic_table_desc">ARIA の table ロールの代わりに使用する意味論的な要素</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader">ARIA の table ロール</span> + <span role="columnheader">意味論的な要素</span> + </div> + </div> + <div role="rowgroup"> + <div role="row"> + <span role="cell">table</span> + <span role="cell">table</span> + </div> + <div role="row"> + <span role="cell">rowgroup</span> + <span role="cell">thead, tbody, or tfoot </span> + </div> + </div> +</div> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>role="table"</code> を持つ要素はセルを含む行を持つ静的な表構造です。 表の個々のセル内のウィジェットはインタラクティブになることがありますが、セルはフォーカス可能または選択可能ではありません。 可能な限りネイティブの HTML {{htmlelement("table")}} 要素を使用することを強くお勧めします。</p> + +<div class="warning"> +<p>表が選択状態を維持している場合、2次元ナビゲーションを使用している場合、またはユーザーがセルの順序を並べ替えることができる場合は、代わりにグリッド（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>）またはツリーグリッド（<code><a href="/ja/docs/">treegrid</a></code>）を使用します。</p> +</div> + +<p>ARIA の表を作成するには、<code>role="table"</code> をコンテナ要素に追加します。 そのコンテナ内では、各行に <code>role="row"</code> を設定し、子セルを含ませます。 各セルには、列ヘッダー（<code>columnheader</code>）、行ヘッダー（<code>rowheader</code>）、または単なるセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></code>）のいずれかのロールがあります。 行は、表の子になることも、行グループ（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code>）内になることもあります。</p> + +<p>表のキャプションは、<code>aria-labelledby</code>、<code>aria-label</code>、または <code>aria-describeby</code> によって定義できます。 {{htmlelement("tbody")}}、{{htmlelement("thead")}}、{{htmlelement("tr")}}、{{htmlelement("th")}}、{{htmlelement("td")}} など、他のすべての意味論的な表の要素は、<code>rowgroup</code>、<code>row</code>、<code>columnheader</code>、<code>cell</code> などの関連するロールを介して追加する必要があります。</p> + +<p>表にソート可能な列または行が含まれる場合は、<code>aria-sort</code> 属性をヘッダーのセル要素に追加する必要があります（表自体ではありません）。 ある行または列が隠されている場合は、それぞれのセルの <code>aria-colindex</code> または <code>aria-rowindex</code> とともに、それぞれ列または行の総数を示す <code>aria-colcount</code> または <code>aria-rowcount</code> を含める必要があります。 <code>aria-colindex</code> または <code>aria-rowindex</code> は、それぞれ行または列内のセルの位置に設定します。 表に複数行または複数列にわたるセルが含まれる場合は、<code>aria-rowspan</code> または <code>aria-colspan</code> も含める必要があります。 すべての支援技術でサポートされているすべての関連する意味論的な要素および属性と共に、{{htmlelement("table")}} 要素を単純に使用する方がはるかに簡単です。</p> + +<p>表構造を持つインタラクティブなウィジェットを作成するには、代わりにグリッドパターンを使用してください。 インタラクションが個々のセルの選択状態を提供する場合、左から右へ、上から下へのナビゲーションを提供する場合、またはユーザーインターフェイスでセルの順序の並べ替えやドラッグアンドドロップなどの個々のセルの順序の変更を許可する場合、代わりに <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code> または <code><a href="/ja/docs/">treegrid</a></code> を使用してください。</p> + +<div class="note"> +<p><strong>注</strong>: 可能な限りネイティブの <a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML の表要素</a>を使用することを強くお勧めします。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">role="rowgroup"</a></dt> + <dd>表のオプションの子である行グループは、{{htmlelement("thead")}}、{{htmlelement("tbody")}}、および {{htmlelement("tfoot")}} と同様に、行のグループをカプセル化します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">role="row"</a></dt> + <dd>表内の行、およびオプションで行グループ（<code>rowgroup</code>）内の行、つまり1つ以上のセル（<code>cell</code>）、列ヘッダー（<code>columnheader</code>）、または行ヘッダー（<code>rowheader</code>）のコンテナです。</dd> + <dt>aria-describedby 属性</dt> + <dd>値として、表のキャプションとして機能する要素の <code>id</code> を取ります。</dd> + <dt>aria-label 属性</dt> + <dd><code>aria-label</code> は、表にアクセス可能な名前を提供します。</dd> + <dt>aria-colcount 属性</dt> + <dd> + <p>この属性は、ある列が常に DOM に存在しない場合にのみ必要です。 全表の列数を明示的に示します。 値を全表の列の総数に設定します。 不明な場合は、<code>aria-colcount="-1"</code> を設定してください。</p> + </dd> + <dt>aria-rowcount 属性</dt> + <dd>この属性は、DOM ノードの数を最小限に抑えるために行を再利用するスクロール可能な表など、ある行が常に DOM に存在しない場合にのみ必要です。 全表の行数を明示的に示します。 値を全表の行の総数に設定します。 不明な場合は、<code>aria-rowcount="-1"</code> を設定してください。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> +</dl> + +<p>無し。 ソート可能な列については、 <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">columnheader</a></code> ロールを参照してください。</p> + +<div class="note"> +<p>ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを<strong>追加して</strong>アクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能な限り、ARIA の <code>table</code> ロールの代わりに HTML の {{htmlelement("table")}} 要素を使用してください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><div role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <div id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader" aria-sort="none">ARIA のロール</span> + <span role="columnheader" aria-sort="none">意味論的な要素</span> + </div> + </div> + <div role="rowgroup"> + <div role="row" aria-rowindex="11"> + <span role="cell">header</span> + <span role="cell">h1</span> + </div> + <div role="row" aria-rowindex="16"> + <span role="cell">header</span> + <span role="cell">h6</span> + </div> + <div role="row" aria-rowindex="18"> + <span role="cell">rowgroup</span> + <span role="cell">thead</span> + </div> + <div role="row" aria-rowindex="24"> + <span role="cell">term</span> + <span role="cell">dt</span> + </div> + </div> +</div> +</pre> + +<p>上記は表の一部です。 <code>aria-rowcount</code> プロパティで示されるように、全表には81のエントリがありますが、現在表示されているのは4つだけです。 列ヘッダーの <code>aria-sort</code> プロパティで示されるように、列はソート可能ですが、現在はソートされていません。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>データ表構造には、{{htmlelement("table")}}、{{htmlelement("tbody")}}、{{htmlelement("thead")}}、{{htmlelement("tr")}}、{{htmlelement("th")}}、{{htmlelement("td")}} などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA の <code>table</code> ロールの関連するユースケースは、<code>display: grid</code> など、CSS の {{cssxref("display")}} プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の <code>table</code> ロールを使用して意味論を戻すことができます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>無し</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#table","ARIA Table Role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#table","ARIA Table Role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML の表要素</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">ARIA: grid ロール</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/textbox_role/index.html b/files/ja/web/accessibility/aria/roles/textbox_role/index.html new file mode 100644 index 0000000000..6597033574 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/textbox_role/index.html @@ -0,0 +1,130 @@ +--- +title: 'ARIA: textbox ロール' +slug: Web/Accessibility/ARIA/Roles/textbox_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/textbox_role +--- +<p>\{{ariaref}}<span class="seoSummary"><code>textbox</code> ロールは、自由形式テキストの入力を可能にする要素を識別するために使用されます。</span> 可能であれば、このロールを使用するのではなく、単一行入力の場合は <code><a href="/ja/docs/Web/HTML/Element/input/text">type="text"</a></code> の {{HTMLElement("input")}} 要素を使用し、複数行入力の場合は {{HTMLElement("textarea")}} 要素を使用してください。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p class="p2">要素に <code>textbox</code> ロールがある場合、ブラウザーはアクセス可能なテキストボックスイベントを支援技術に送信し、ユーザーにそのことを通知できます。</p> + +<p class="p2">デフォルトは単一行入力で、<kbd>Return</kbd> や <kbd>Enter</kbd> はフォームを送信します。 この場合、 <code>type="text"</code> の HTML の {{HTMLElement("input")}} を使用することをお勧めします。 HTML の {{HTMLElement("textarea")}} のように改行をサポートする複数行のテキストボックスを作成するには、<code>aria-multiline="true"</code> を設定します。 HTML の <code>contenteditable</code> 属性を含めると、テキストノードが確実に編集可能になります。</p> + +<pre class="brush: html"><!-- 単純なテキスト入力フィールド --> +<div id="txtboxLabel">5桁の郵便番号を入力してください</div> +<div role="textbox" contenteditable="true" aria-placholder="5-digit zipcode" aria-labeledby="txtboxLabel"></div> + +<!-- 複数行のテキスト領域 --> +<div id="txtboxMultilineLabel">記事のタグを入力してください</div> +<div role="textbox" contenteditable="true" aria-multiline="true" + aria-labeledby="txtboxMultilineLabel" aria-required="true"></div> </pre> + +<p>意味論的な要素はより簡潔であり、テキストボックス機能をサポートするために JavaScript を必要としません。</p> + +<p> </p> + +<pre class="brush: html"><label for="txtbox">5桁の郵便番号を入力してください</label> +<input type="text" placholder="5-digit zipcode" id="txtbox"/> + +<!-- 複数行のテキスト領域 --> +<label for="txtboxMultiline">記事のタグを入力してください</lable> +<textarea id="txtboxMultiline" required></textarea> </pre> + +<p> </p> + +<p class="p2">テキストフィールドが読み取り専用の場合、要素に対して <code>aria-readonly="true"</code> と設定することでこれを示します。</p> + +<dl> +</dl> + +<h3 id="Associated_ARIA_properties" name="Associated_ARIA_properties">関連する ARIA のプロパティ</h3> + +<dl> + <dt><code>aria-activedescendent</code> 属性</dt> + <dd>その値として、ID は DOM のフォーカスを持つ要素の子孫であるか、または <code>aria-owns</code> 属性で指定された論理的子孫であり、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/combobox">combobox</a></code> などの複合ウィジェットの一部であるときに、その要素にフォーカスがあるときを示します。 たとえば、コンボボックスでは、テキストボックスにフォーカスが残ることがありますが、<code>textbox</code> 要素の <code>aria-activedescendant</code> の値は、テキストボックスによって制御されるポップアップリストボックスの子孫を参照します。 この属性は、フォーカスが変更されるとプログラムで更新する必要があります。</dd> + <dt><code>aria-autocomplete</code> 属性</dt> + <dd>フィールドへのユーザーの入力が、意図した値の予測の表示をトリガーできるかどうか、およびその方法を示します。 これは以下の値をサポートしています。 + <ul> + <li><code>inline</code>: 予測されたテキストがキャレットの後に挿入されます。</li> + <li><code>list</code>: 予測されたテキストは、値の集まりとして提示されます。</li> + <li><code>both</code>: 予測されたテキストは、値の集まりとして提示され、補完に必要なテキストの1つの値がキャレットの後に挿入されます。</li> + <li><code>none</code>（デフォルト）: 予測されたテキストは提供されません。</li> + </ul> + + <p><code>list</code> または <code>both</code> が設定されている場合は、<code>aria-controls</code> 属性と<code> aria-haspopup</code> 属性も含める必要があります。 <code>aria-controls</code> の値は、提案値のリストを含む要素の ID です。 さらに、テキストボックスまたは <code>combobox</code> ロールを含む包含要素のいずれかに、提案値のリストを含む要素のロールに一致する <code>aria-haspopup</code> の値を持ちます。</p> + </dd> + <dt><code>aria-multiline</code> 属性</dt> + <dd><code>aria-multiline="true"</code> が設定されている場合、支援技術は、テキストボックスが複数行入力をサポートしていることをユーザーに知らせます。 <kbd>Enter</kbd> や <kbd>Return</kbd> はフォームを送信するのではなく改行を作成します。 ARIA は要素の動作を変更しません。 むしろ、この機能は開発者によって制御されなければなりません。 <code>false</code> が設定されている場合、または属性が省略されていて <code>false</code> がデフォルトの場合、ユーザーはコントロールが単一行のテキストボックスであり、<kbd>Enter</kbd> や <kbd>Return</kbd> がフォームを送信することを期待しています。</dd> + <dt><code>aria-placeholder</code> 属性</dt> + <dd>テキストフィールドに何を入力するかについてのヒント（単語またはフレーズ）をユーザーに示します。 ヒントは、サンプル値または期待されるフォーマットの簡単な説明であるべきです。 この情報は、ラベルの代用として使用するべきではありません。 ラベルはフォーカス可能で永続的で、どのような情報が期待されているかを示し、プレースホルダーのテキストは期待値を一時的に示唆しているだけで、誤って実装するとアクセシビリティが低下する可能性があります。 プレースホルダーは、コントロールが最初にフォーカスを受け取ったときやユーザーが以前に入力した値を削除したときなど、コントロールの値が空の文字列のときに表示するべきです。 <code>aria-placeholder</code> を使用する代わりに、意味論的な <code><input type="text"></code> や <code><textarea></code> に <code>placeholder</code> 属性を使用します。</dd> + <dt><code>aria-readonly</code> 属性</dt> + <dd>ユーザーがテキストフィールドの値を変更できないことを示します。 <code>aria-readonly</code> を使用する代わりに、意味論的な <code><input type="text"></code> や <code><textarea></code> に <code>readonly</code> 属性を使用します。</dd> + <dt><code>aria-required</code> 属性</dt> + <dd>フィールドが送信される前にフィールドに値を指定する必要があることを示します。 <code>aria-required</code> を使用する代わりに、意味論的な <code><input type="text"></code> や <code><textarea></code> に <code>required</code> 属性を使用します。</dd> +</dl> + +<h3 id="Keyboard_interactions" name="Keyboard_interactions">キーボードインタラクション</h3> + +<p>単一行での使用（<code>aria-multiline</code> が <code>false</code> または使用されていない場合）では、<kbd>Return</kbd> キーや <kbd>Enter</kbd> キーがフォームを送信します。 複数行での使用（<code>aria-multiline</code> が <code>true</code> の場合）では、<kbd>Return</kbd> キーや <kbd>Enter</kbd> キーを押すと改行が挿入されます。</p> + +<h3 id="JavaScript_features" name="JavaScript_features">必要な JavaScript 機能</h3> + +<p>すべてのプロパティとステートに関連するすべての機能を維持する必要があります。 また、単一行のテキストボックスにおいて <kbd>Enter</kbd> や <kbd>Return</kbd> でフォームを送信する必要があります。</p> + +<dl> + <dt>フォーカスイベントハンドラと aria-activedescendent 属性</dt> + <dd>テキストボックスとリストボックスで構成されるコンボボックスなどの複合ウィジェットを実装する場合は、ハンドラを使用して <code>aria-activedescendent</code> 属性を管理する必要があります。 この手法を使用する前に、ターゲットとするブラウザーが現在サポートしていることを確認してください。 詳細については、<a href="https://www.w3.org/TR/wai-aria/#aria-activedescendant">aria-descendent の仕様</a>（英語）を参照してください。</dd> +</dl> + +<div class="note"> +<p>ARIA の <code>textbox</code> ロールの代わりに <code>type="text"</code> の {{HTMLElement("input")}} 要素、または {{HTMLElement("textarea")}} 要素を使用する方が良い方法です。 どちらの意味論的な要素を使用する場合でも、ARIA の <code>textbox</code> ロールは必要ありません。 <a href="https://www.w3.org/TR/aria-in-html/">HTML で ARIA を使用する場合の注意</a>（英語）を参照してください。</p> +</div> + +<h2 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h2> + +<p class="p1"><code>textbox</code> ロールが要素に追加されるか、そのような要素が可視になると、ユーザーエージェントは以下を行うべきです。</p> + +<ul class="ul1"> + <li class="li2">オペレーティングシステムのアクセシビリティ API で <code>textbox</code> ロールを持つものとして要素を公開します。</li> + <li class="li2">オペレーティングシステムのアクセシビリティ API をサポートしている場合は、アクセシビリティ API を使用してアクセス可能なテキストボックスイベントを発生させます。</li> +</ul> + +<p class="p1">支援技術製品は、そのようなイベントをリスンし、それに応じてユーザーに以下を通知するするべきです。</p> + +<ul class="ul1"> + <li class="li2">スクリーンリーダーは、フォーカスが最初にテキストボックスに着くと、そのラベルとロールをアナウンスするべきです。 コンテンツも含まれている場合は、これを通常のテキストボックスの場合と同様にアナウンスするべきです。</li> + <li class="li2">スクリーン拡大鏡でテキストボックスが拡大されることがあります。</li> +</ul> + +<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Example_1_Adding_the_role_in_the_HTML_code_for_single_line_input" name="Example_1_Adding_the_role_in_the_HTML_code_for_single_line_input">例 1: 単一行入力の HTML コードにロールを追加する</h3> + +<p class="p2">以下のスニペットは、<code>textbox</code> ロールが HTML ソースコードにどのように直接追加されるかを示しています。</p> + +<pre class="brush: html"><div role="textbox" contenteditable="true"></div></pre> + +<h3 class="p1" id="Example_2_Adding_the_role_in_the_HTML_code_for_multi-line_input" name="Example_2_Adding_the_role_in_the_HTML_code_for_multi-line_input">例 2: 複数行入力の HTML コードにロールを追加する</h3> + +<p class="p2">以下のスニペットは、<code>textbox</code> ロールが HTML ソースコードにどのように直接追加されるかを示しています。</p> + +<pre class="brush: html"><div role="textbox" contenteditable="true" aria-multiline="true"></div></pre> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<ul> + <li class="li1"> このロールが適用される HTML 要素に <code>contenteditable="true"</code> 属性を必ず追加してください。 <code>aria-readonly</code> を <code>true</code> に設定した場合でもそうします。 このようにして、読み取り専用でない場合は、コンテンツを編集可能にすることを通知します。</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/searchbox">ARIA: search ロール</a></li> +</ul> |