files/ja/web/accessibility/aria/roles/document_role/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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><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">&lt;div role="dialog"&gt;
 ...
 &lt;div id="InfoText" role="document" tabindex="0"&gt;
  &lt;p&gt;いくつかの情報テキストがここに入ります。&lt;/p&gt;
 &lt;/div&gt;
 ...
 &lt;button&gt;閉じる&lt;/button&gt;
&lt;/div&gt;
</pre>

<p>この例は、いくつかのコントロールと、支援技術のユーザーがタブ移動で読むことができる情報テキストを含むセクションを備えた<a href="/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role">ダイアログ</a>ウィジェットを示しています。</p>

<h2 id="Description" name="Description">説明</h2>

<p>デフォルトでは、ウェブページは文書 (document、ドキュメント) として扱われ、支援技術 (AT) は、新しいウェブページに入るとき閲覧モードまたは読み取りモードにします。 このモードは、ウィジェットロールやアプリケーション (<code>application</code>) ロールなど、さまざまなロールを通じて変更できます。 文書 (<code>document</code>) ロールは、AT を閲覧モードまたは読み取りモードに戻します。</p>

<p>一般的に、アプリケーションロールまたは他のインタラクティブなウィジェットロール内に配置される文書 (<code>document</code>) ロールは、利用可能な場合、支援技術のユーザーが閲覧モードまたは仮想読み取りモードを使用して読むべきである複雑な複合ウィジェットのセクションを示すために使用します。</p>

<p>読み取りモードを持つ AT は、ウィジェットロールまたはアプリケーションロールの設定を持つ要素を除くすべての要素に対して読み取りモードをデフォルトとしているため、文書ロールは、静的リッチテキストとして読むべきであるウィジェットまたはアプリケーション内のフォーカス可能な要素に対してのみ役立ちます。 ウィジェット内のテキストを含む要素に <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>) ロールは、文書ロールを持つ他の要素との関係はなく、単にそれ含む複合ウィジェットとの関係があるだけです。 記事は関連記事を持つことができます。</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>
 <dt><code>tabindex="0"</code></dt>
 <dd>支援技術のユーザーがそれにタブ移動してすぐに読み始められるように、それをフォーカス可能にするために使用します。</dd>
</dl>

<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つの会話の開始見出しにキーボードフォーカスが設定されている場合、スクリーンリーダーのユーザーは読み取りモードのコマンドを使用してメッセージを読んだり、展開したり、折りたたんだり、操作したりできます。 [戻る] ボタンをアクティブ化するか、関連するキーを押すことによって、フォーカスがメッセージリストに戻ると、アプリケーションとの直接やりとりモードが再び起動し、<kbd>矢印</kbd>キーを使用してリスト内の別の会話に移動できます。</p>

<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2>

<p><code>tabindex</code> 属性に値 0 を設定することにより、文書ロールを持つ項目がフォーカス可能であることを常に確認してください。 これにより、項目がタブ順序にも含まれるようになります。</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","#document","document")}}</td>
   <td>{{Spec2('ARIA')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2>

<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>


<section id="Quick_links">
    <ol>
        <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA ロール</strong></a>{{ListSubpagesForSidebar("/ja/docs/Web/Accessibility/ARIA/Roles")}}</li>
    </ol>
</section>