diff options
Diffstat (limited to 'files/ja/web/accessibility/aria/roles/document_role')
| -rw-r--r-- | files/ja/web/accessibility/aria/roles/document_role/index.html | 94 |
1 files changed, 94 insertions, 0 deletions
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> |